Rollovers

I am sure you are all familiar with CSS rollovers so I'll spare a rambling and cut to the chase.

There are two ways to do it:
- Two images (say menu.gif and menu-hover.gif)
- One image (menu.gif)

Two images source would be something like:
#menu li a {background:url(images/menu.gif) repeat-x}
#menu li a:hover {background:url(images/menu-hover.gif) repeat-x}

One image source would be like:
#menu li a {background:url(images/menu.gif) repeat-x}
#menu li a:hover {background-position:left 15px}

The benefit of the second option is that only one image is needed to be loaded (so it saves sending 2 requests to the server, plus when someone puts their cursor on the item they don't have to wait for the rollover image to be fetched) so it seems the obvious choice.

My question is, are there any cons to the second option I've overlooked? In your opinion is the first or second option better?

 

I prefer the second option. It's more efficient.

 

I've always stuck by the second option purely because of the loading issue. I'll be interested to see if anyones knows any bad things about it though. Maybe it takes a tiny bit longer to make possibly.

Nathan

 

I can't really think of any reasonable negatives to the second method. I prefer it.

The only so-so negative is that it is a little bit difficult to understand what is happening if you are new to CSS. But that is more of an experience problem.

 

Very true. But when you do get it, you think "...thanks kinda cool actually" and it's all worth it in the end. haha

 

Second method means less files - less files means less handshaking and less server load. Less files means if working in palettized images you only are spending bandwidth on one palette instead of multiple ones so your filesizes should be SMALLER.

The first method is the one that doesn't make any sense - waste of bandwidth, slow pageloads, 'delay' on firstload... The only people who might understand it better are your people still stuck thinking 1997 style on how Javascript would do it.

 

The only disadvantage the second method has as stated is just the thinking involved in regards to the element's dimensions that you're applying the background image on, and the maintenance of your file if you choose to add more than one graphic on it.. think Deathshadow has like 40-50 graphics in a single file on his battletech site... very hard to visualize it sometimes.. involves some math..

 

Yep indeed.

That's a good idea (though yes, lots of math!) for your own site. Clients might not be too impressed that all their images are in the one file.

From my experience clients do find it easier to have the two seperate images when they try and edit them, as deathshadow says lots of people are still in the javascript mentality and don't understand that the one image is really two.

 

Second option. I hate that loading delay when you use two.