Creating Pop-ups

There's nothing that says the second image in a rollover has to appear directly on top of the previous one. If you position the second image some distance away, you can give additional details about the hovered item.

Tips

This technique builds on Eric Meyer's work on pure CSS pop-ups: http://meyerweb.com/eric/css/edge/popups/demo2.html
Set the height and width to 0 instead of display:none to make this work on Netscape 6 and IE 6. I also noticed that it was necessary to apply a background color to the a:hover (not to the img) for it to work properly in IE 6.
There's no reason you couldn't have the pop-up include text instead of images. Or text and images.
Notice that in the example shown here, the page does not load faster just because the initial images are small. The images are all the same, original size.

Creating Pop-ups

Figure 12.9. You can see a fully commented version of this code on my Web site.

Figure 12.10. When the visitor hovers over a photo in the left column, a larger version appears in the right frame.