Dan Rubin's SuperfluousBanter

Zeldman’s CSS Rollovers

Written by

Dan Rubin

in

OK, now before you go flaming me about what I’m about to say, just take a few deep breaths and stay calm:

Zeldman’s CSS Rollovers are not a good thing.

Now, this is just my opinion, and as such it may be wrong, or it may simply change at some point in the future — but enough about me, let’s get to the point.

Zeldman has relayed on his site recently that the XHTML2 standard will likely not include the <img> tag, which is why it’s a good idea to find an alternative for displaying images. This is where the CSS rollover/image display code comes into play. Without using the <img> tag, Zeldman’s homepage proudly displays two small banners in the right column, without the use of the <img> tag, nor any JavaScript for the rollover effect.

Here is the problem: it requires more code than just using an <img> tag and some JavaScript.

Zeldman’s code:


<-- HTML Code -->
<div id="banner2"><a id="alban" href="http://www.alistapart.com/" target="eljefe" title="A List Apart, for people who make websites."><span class="alt">A List Apart</span></a></div>

<div id="banner1"><a id="hcban" href="http://www.happycog.com/" target="eljefe" title="Happy Cog Studios. Web design and consulting."><span class="alt">HapXXCJog Studios</span></a></div>

<-- CSS Code -->
#banner1, #banner2 {
margin: 10px 0 0 2px;
padding: 0;
width: 100px;
height: 25px;
}

#banner1 {
/* Opera uses this background for the rollover effect. */
background: url(/i/bans/hc100bano.gif) no-repeat 1px;
}

#banner2 {
/* Opera uses this background for the rollover effect. */
background: url(/i/bans/ala100bano.gif) no-repeat 1px;
}

#hcban, #alban {
display: block;
padding: 0;
border: 1px solid #6cc;
background: url(/i/bans/hc100ban.gif) no-repeat 1px; /* start hiding from macie\*/
background-position: 0px; /* stop hiding */
width: 100px;
height: 25px;
voice-family: "\"}\"";
voice-family: inherit;
width: 98px;
height: 23px;
}

html>body #hcban, html>body #alban{
width: 98px;
height: 23px;
}

#alban {
background-image: url(/i/bans/ala100ban.gif);
}

a#hcban:hover {
background-image: url(/i/bans/hc100bano.gif);
ns- border: 1px solid #cff;
}

a#alban:hover {
background-image: url(/i/bans/ala100bano.gif);
border: 1px solid #cff;
}

.alt {
display: none;
}

In addition, the images are not visible to older browsers. I’ll have to hear a very strong argument against the <img> tag before I can agree that moving away from it entirely is a good thing.

Again, my opinion on the subject is subject to change, and of course I’ll try this method myself to experiment, but for now I’ll vote “No” on the CSS Rollover referendum.

More posts