« Back to the article: Experimenting with visited links by Matthew James Taylor
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?
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.
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.
(Learn more about the image I used for this puzzle here: Internet memes attack Iceland.)