[thelist] CSS Rollovers without Javascript

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">&#160;|&#160;</span>
>       <a class="buttontwo" href="http://www.creed.co.uk"><span
class="hidden">Only</span></a>
>       <span class="hidden">&#160;|&#160;</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