Pure CSS Popups 2

Now that we've seen pure CSS popups causing text to appear and disappear, it follows that we could cause other elements to do the same... like images, maybe? Maybe.

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. The basic drill is this: 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...

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 {height: 0; width: 0; border-width: 0;}

Why didn't I just use display: none? Because in Netscape 6.x, the images aren't loaded when the document loads if they're styled that way, and I can understand why. After all, there's no point to loading images (and wasting bandwidth) if they aren't going to be displayed, right? The problem is that the images won't load until you mouse over a link, which makes it look like they aren't there.

So instead I set them to have no height and width, which means that they are displayed, just way too small to see (until we hover the links). This gets the browser to load them, and hopefully have them ready for display when the reader starts using the links. Obviously, you could also try loading the images with Javascript, but I didn't want to take the easy way out here.

So to get the icons to appear, I wrote:

div#links a:hover img {position: absolute;
    top: 190px; left: 55px; height: 50px; width: 50px;}

This is a lot simpler than the SPAN-popup styles we had to use in the original demo, since here we only have to make the image appear. We don't have to bother styling the color, padding, font, blah blah blah.

What's Up With Explorer?

For some reason, IE5.x/Win doesn't handle the dynamic changing of the image size. Apparently, once you set the height and width of an image, it's set that way forever. This doesn't come as too much of a surprise, actually, considering that even if we used the display: none/display: block trick in the SPAN-popup demo, Explorer has trouble. 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. You can see an example of this if you're using IE5.x, but don't say I didn't warn you.

A Minor Side Note (Redux)

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

Image Credits