Pure CSS Popups 2b
Now that we've seen pure CSS image popups let's look into an alternate way of doing it, although it's one that no browser does very well. According to my testing, if you're visiting this page with Netscape 6.1 or Mozilla 0.9.4 or later, then you should see the intended effect, albeit very slowly. IE5.5 for Windows doesn't get this one right, as we said before. Read on to see why.
Hands-on: What to Do
Any browser that does a good job of supporting positioning will get some of the stuff I did here correct, so continuing onward is probably worth it even if you don't have one of the above-mentioned browsers handy. The basic approach is like before: mouse over the links on the left side of the page. Watch the space below the links. Make sure to mouse over all the links, back and forth, up and down... you know the drill. If you're using IE5.5 for Windows, then start with the top link and move downward to the bottom link, then head back upwards.
From SPAN to IMG
In every case, the "icon" is an img element inside the actual hyperlinks. Here's one example from the source of this document:
<a href="http://www.meyerweb.com/eric/css/">Links<img src="eric.gif">
To prevent the image from showing up when the page loads, I have the following style:
div#links a img {display: none;}
Then we get the images to appear like this:
div#links a:hover img {display: block; position: absolute;
top: 190px; left: 55px; height: 50px; width: 50px; border-width: 0;}
Again, simplicity rules. But Explorer, sadly, does not.
What's Up With Explorer?
Basically, it will popup each image the first time you roll over a link, but it never goes away. So you get the images to stack up on top of each other, but they don't disappear when you mouse out of the links.
A Minor Side Note (Retroi?)
Just in case you missed it the first time: Notice how the hyperlinks appear to overlay the main-content border, and how that overlap really lights up when you're hovering over a link but still has a gray stripe down the middle of the overlap. That's done with nothing more complicated than a border on the hyperlinks themselves, the color and style of which change during the hover:
div#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
This effect works because I set up everything so the borders on the hyperlinks actually overlaps the border of the main content area. Because I'm positioning these elements using pixel measures, I can get things to line up appropriately and then style them however I like. it's a bit of a trick, of course-- by sticking to shades of gray, it's easier for me to create translucency effects. Someone with a sufficiently keen color sense could probably come up with better stuff than I did. (Like not putting light text on a dark background, for starters.)