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:
1. | Create a set of links in the usual way in the (X)HTML document.
|
2. | In the CSS, style the a:link and a:visited selectors at the “home” location.
|
3. | Then style the a:focus and a:hover selectors with absolute positioning so that the additional information—in this case, a larger image—is displayed in a different location.
|
✓ 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 ...
Get HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
