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.

To create pop-ups:


Create a set of links in the usual way in the (X)HTML document.


In the CSS, style the a:link and a:visited selectors at the "home" location.


Then style the a:focus and a:hover selectors with absolute positioning so that the additional informationin this case, a larger imageis displayed in a different location.


  • This technique builds on Eric Meyer's work on pure CSS pop-ups:

  • 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.

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.

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: