css-only mouseovers

Member Posts : 9 Join date : 2011-04-27

Hello,

In experimenting for a non-javascript solution for mouseover image swaps, I hacked together the following code. It seems to work fine on Firefox and Safari on my Mac, but I don't have access to try it on every browser/platform out there.

The idea is simple: link to a blank transparent image, use css anchor pseudo-classes to swap backgrounds. Display block for anchor.

I was wondering if anyone sees any limitations with this code:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style>

a.blink {
display: block;
width: 108px;
height: 43px;
background-image: url(image.gif);
border: 0;
}

a.blink:visited {
background-image: url(image.gif);
border: 0;
}

a.blink:hover {
background-image: url(hover.gif);
border: 0;
}

</style>

</head>
<body>

<p><a href="">some text here</a></p>
<p><a href="" class="blink"><img style="border: 0;" src="alpha.gif" width="108px" height="43px"></a></p>

</div>

</body>
</html>

Member Posts : 5 Join date : 2011-04-18

1) You're missing the type attribute.
2) It's 2011. You shouldn't be using GIFs any more.
3) Your :visited rule is redundant.
4) There is no need for the hard-coded image at all there.

Otherwise, the code should work in even IE6.

Member Posts : 11 Join date : 2011-04-17

read this tutorial:

http://www.elated.com/articles/css-rollover-buttons/

this is the best way to achieve rollovers.

Member Posts : 9 Join date : 2011-04-27

Splashy wrote:: 2) It's 2011. You shouldn't be using GIFs any more..

What do I use then, pngs? I didn't think they showed up properly in IE6 (or maybe earlier?)

Code:: There is no need for the hard-coded image at all there.

So just use an empty anchor container? I didn't know you could do that, but it seemed to work when I tried it, if that is what you meant.

Member Posts : 11 Join date : 2011-04-17

PNG-24 aren't well supported by IE6, but you can use PNG-8. and yes they support alpha transparency

Member Posts : 9 Join date : 2011-04-27

Nice tutorial, and an interesting approach. I have read in the past however where positioning attributes are not recognized in IE6, so I am a bit leary. Perhaps that doesn't apply here?