Comments on: Image rollovers without JavaScript!

by: slant

Thu, 07 Sep 2006 16:37:28 +0000

Actually, option two seems very preferable. If you go to seeunity.com - you’ll see that the top nav uses the first method - but the first time you rollover - you’ll get some funky experiences. I am guessing that this second method will work better.

by: Evan Agee

Fri, 25 Aug 2006 15:50:08 +0000

Yes, pre-loading is a good idea, just as it is with traditional Javascript-fueled rollovers.

by: Maria

Fri, 25 Aug 2006 15:47:45 +0000

When you preload the images it doesn’t take as long… but thanks for the idea. I like it a lot.

by: ruud

Thu, 08 Dec 2005 13:00:06 +0000

I used it in Netscape 8.0.4 and Firefox 1.0.7 but de red image doesn’t stay when i clicked it, it returns to white with a border around the image.
On InternetExplorer 6 it works fine.
Is there a workaround for the other two browsers?

by: nataz

Thu, 01 Dec 2005 20:06:52 +0000

It works perfectly under Mac os X with Safari 2.0.2, IE 5.2.3, FireFox 1.0.6, Netscape 7.2, Shiira 0.9.5 and Opera 7.54 as well as under Windows XP pro with Netscape 7.2, FireFox 0.9.3 & 1.5, and IE 6.0.26.

by: Nick Shaw

Tue, 17 May 2005 08:43:44 +0000

I dont think Safari on the mac supports the background CSS.

by: Evan Agee

Mon, 25 Apr 2005 19:53:32 +0000

I’ve tested this code on Mozilla 1.0 and several versions of Netscape and IE and it seems to be fine. Please feel free to send me any browser/version information if you find a browser that this CSS doesn’t work with.

by: Martin

Mon, 18 Apr 2005 23:50:12 +0000

I like the second option. but it does not seem to work in Gecko browsers…

by: csabi

Mon, 11 Apr 2005 09:55:28 +0000

Using background: url(”x.gif”) is a very slow solution as you can see the menu from my homepage. Is a way to force the browser to cache the used images ?

by: Evan Agee

Tue, 29 Mar 2005 18:21:14 +0000

The first CSS rollover option is one that is basically the same in theory as using JavaScript. The second, as you stated, only uses one image, which is much easier to manage.

As far as a technical reason for why the second option is “better”, I believe the main reason is because you’re only referencing one image file instead of two or more. Another technical issue fixed by using one master image instead of two or more is that there’s no delay when you rollover using the 2nd option. With the first option the image isn’t loaded until you move over the link, which can produce a delay on slower connections.