[thelist] CSS Rollovers without Javascript
Andy Warwick
mailing.lists at creed.co.uk
Sun Jun 23 07:27:01 CDT 2002
Hi
I've been playing around with some CSS and some gifs, and have managed to come
up with a way to create rollovers without Javascript active that degrade nicely
in text-only browsers and with CSS turned off.
I would appreciate it if some of you could take a look and see which
browsers/platforms work, so I can set up an appropriate "sniff".
So far I have :
Mac IE 5.1 = Yes
Mac IE 5.0 = Yes
Mac Mozilla = Yes
Win IE 5.0 = Yes
Mac Lynx = Yes (degrades to text-only version.)
and
Mac Opera 5.0 = No (rollover images don't show )
Mac NN 4.7 = No (images don't show and neither does text)
The code I have is:
> <head>
> <title>Rollover Test</title>
> <style type="text/css">
> #navbar a { display:block; width:55px; height:62px;
background-repeat:no-repeat; }
> #navbar .buttonone { background-image:url(static.gif); }
> #navbar .buttonone:hover { background-image:url(red.gif); }
> #navbar .buttontwo { background-image:url(static.gif); }
> #navbar .buttontwo:hover { background-image:url(blue.gif); }
> #navbar .buttonthree { background-image:url(static.gif); }
> #navbar .buttonthree:hover { background-image:url(green.gif); }
> .hidden { display:none; }
> </style>
> </head>
> <body>
> <div id="navbar">
> <a class="buttonone" href="http://www.creed.co.uk"><span
class="hidden">Text</span></a>
> <span class="hidden"> | </span>
> <a class="buttontwo" href="http://www.creed.co.uk"><span
class="hidden">Only</span></a>
> <span class="hidden"> | </span>
> <a class="buttonthree" href="http://www.creed.co.uk"><span
class="hidden">Version</span></a>
> </div>
> </body>
> </html>
And it is up at:
<http://development.creed.co.uk/rollover_test/index.htm>
Try it without Javascript turned on, and with CSS active and inactive, and you
should see what I mean about degrading gracefully.
A couple of the browsers I've tested work, but display a slight flicker when
swapping images. If anyone has any insight or suggestions on how to stop it, I
would be much obliged.
TIA
Andy W
More information about the thelist
mailing list