« Back to the article: Experimenting with visited links by Matthew James Taylor

The 'Visited Link' Jigsaw Puzzle

Click the jigsaw-puzzle pieces to put them in place (scroll-down to see them).
Can you find all 15 hidden internet memes in the completed image?

This puzzle is made from pure CSS. No JavaScript is required! See a description of how it's done below.

The jigsaw puzzle back-board
Art and Design by Matthew James Taylor
Jigsaw puzzel piece 22 of 54 Jigsaw puzzel piece 23 of 54 Jigsaw puzzel piece 2 of 54 Jigsaw puzzel piece 48 of 54 Jigsaw puzzel piece 38 of 54 Jigsaw puzzel piece 49 of 54 Jigsaw puzzel piece 50 of 54 Jigsaw puzzel piece 51 of 54 Jigsaw puzzel piece 52 of 54 Jigsaw puzzel piece 5 of 54 Jigsaw puzzel piece 6 of 54 Jigsaw puzzel piece 42 of 54 Jigsaw puzzel piece 43 of 54 Jigsaw puzzel piece 19 of 54 Jigsaw puzzel piece 30 of 54 Jigsaw puzzel piece 3 of 54 Jigsaw puzzel piece 4 of 54 Jigsaw puzzel piece 44 of 54 Jigsaw puzzel piece 45 of 54 Jigsaw puzzel piece 46 of 54 Jigsaw puzzel piece 47 of 54 Jigsaw puzzel piece 13 of 54 Jigsaw puzzel piece 14 of 54 Jigsaw puzzel piece 34 of 54 Jigsaw puzzel piece 35 of 54 Jigsaw puzzel piece 15 of 54 Jigsaw puzzel piece 16 of 54 Jigsaw puzzel piece 41 of 54 Jigsaw puzzel piece 53 of 54 Jigsaw puzzel piece 54 of 54 Jigsaw puzzel piece 20 of 54 Jigsaw puzzel piece 24 of 54 Jigsaw puzzel piece 27 of 54 Jigsaw puzzel piece 28 of 54 Jigsaw puzzel piece 29 of 54 Jigsaw puzzel piece 17 of 54 Jigsaw puzzel piece 18 of 54 Jigsaw puzzel piece 39 of 54 Jigsaw puzzel piece 40 of 54 Jigsaw puzzel piece 31 of 54 Jigsaw puzzel piece 32 of 54 Jigsaw puzzel piece 9 of 54 Jigsaw puzzel piece 10 of 54 Jigsaw puzzel piece 11 of 54 Jigsaw puzzel piece 12 of 54 Jigsaw puzzel piece 25 of 54 Jigsaw puzzel piece 26 of 54 Jigsaw puzzel piece 33 of 54 Jigsaw puzzel piece 36 of 54 Jigsaw puzzel piece 37 of 54 Jigsaw puzzel piece 7 of 54 Jigsaw puzzel piece 8 of 54 Jigsaw puzzel piece 1 of 54 Jigsaw puzzel piece 21 of 54

How does this puzzle work?

It's actually very simple. Each piece of the jigsaw-puzzle is just an image inside a link and they all point to the same page (this page). The number of each piece is appended to the end of its link (?piece=21) and so your browser sees it as a unique URL. We need this unique URL so that each link can be visited independently of the others. This is the key to the puzzle.

When you first visit the jigsaw-puzzle page, the 54 pieces are scattered into a random pile - this is done with CSS absolute positioning. As you click on a piece, you navigate to its unique URL and it becomes 'visited'. With CSS we can set these visited link styles to what ever we like. In this case, we change the position of the 'visited pieces' so they correspond to their correct placement on the board.

I chose simple gif images with transparent backgrounds for the puzzle pieces. PNG images would have had smoother edges, but the PNG format not fully supported in all browsers (notably Internet Explorer). As you hover over each piece it comes forward in the stacking order and appears above the others. As an added treat for those using modern browsers (Firefox, Safari, and Google Chrome) the pieces will also be randomly rotated when in their start position.

Resetting the puzzle

To start the puzzle again you will need to clear the history in your browser. Alternatively, try switching to a different browser if you have more than one installed.

Download the demo files (visited-link-puzzle.zip - 2mb)

Download the demo code and experiment with the visited link puzzle on your own computer.

More Visited Link Demos:


(Learn more about the image I used for this puzzle here: Internet memes attack Iceland.)