Actually I wanted to write a post about J.R. Rotem and “The Writing Team”, but it’s kinda much… So, instead here’s another CSS-post.

When you want a picture to change, while the cursor hovers over it, you usually use JavaScript’s <onMouseOver> in this way:

<img src=”picture.jpg” onmouseover=”this.src=’hover-picture.jpg’;” onmouseout=”this.src=’picture.jpg’;” />
 

Although this is the common way, there’s actually another, better and way simpler way to accomplish this hover-effect, which also works when JavaScript is turned off in the browser. It’s – as you can guess from the headline – via CSS:

<div id=”avatar”></div>

<style type=”text/css”>
#avatar {
width: 64px;
height: 64px;
background-image: url(gravatar1.jpg);
}
#avatar:hover {
background-image: url(gravatar2.jpg);
}
</style>

It uses the :hover-funtion in CSS. The picture is actually just a background-image which is swapped, when the cursor hovers over the div. Many sites already use this method. Some even just have one background-image which is relocated via background-postion-y or -x. Facebook does that: The logo is actually two logos – the first one is the normal logo, the second one is with a “Home”-icon. When you hover over the logo background-position-y: -17px; is executed. Although it’s actually the background-image which is repositioned, for you it looks like a house is simply added behind the logo.

Facebook-logo background-picture with and without house

And this leads me to another CSS-thing: Instead of relocating a background-image you could indeed add a house behind the facebook-logo by means of the rather unknown tags :after in combination with content: …;:

<div id=”add-content”> Facebook </div>

<style type=”text/css”>
#add-content:hover:after {
content: “house”;
}
</style>

Though this example works with text, you could easily change that to use images. Now, why does Facebook used the other way to add the house behind the logo and not this, simpler one? Because crappy Internet Explorer can’t interpret :after and content! These tags are actually official web-standards, but -hey- the IE doesn’t give a fuck about web-standards! Instead Microsoft invents its own standards like filter:Alpha(opacity=50, finishopacity=20);… Oh, dude, I hate the IE! From the bottom of my heart! But 66% of all Internet users are still using the IE, because they don’t even know about Firefox or Opera or Flock or Safari…