Eternity Member
Posts : 9 Join date : 2011-04-27
| Subject: css-only mouseovers Tue Jun 21, 2011 7:33 pm | |
| 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>
|
|
Splashy Member
Posts : 5 Join date : 2011-04-18
| Subject: Re: css-only mouseovers Tue Jun 21, 2011 7:34 pm | |
| 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. |
|
Krushh Member
Posts : 11 Join date : 2011-04-17
| Subject: Re: css-only mouseovers Tue Jun 21, 2011 7:34 pm | |
| |
|
Eternity Member
Posts : 9 Join date : 2011-04-27
| Subject: Re: css-only mouseovers Tue Jun 21, 2011 7:35 pm | |
| - 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. |
|
Krushh Member
Posts : 11 Join date : 2011-04-17
| Subject: Re: css-only mouseovers Tue Jun 21, 2011 7:36 pm | |
| PNG-24 aren't well supported by IE6, but you can use PNG-8. and yes they support alpha transparency |
|
Eternity Member
Posts : 9 Join date : 2011-04-27
| Subject: Re: css-only mouseovers Tue Jun 21, 2011 7:36 pm | |
| 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? |
|
Sponsored content
| Subject: Re: css-only mouseovers | |
| |
|