Previous Message
Next Message

One-Image "Rollovers?"

Sent by Paul Novitski on 31 March 2006 17:05


At 07:58 AM 3/31/2006, Mark D Hiatt wrote:
>I have a link with an image to click on to send you to another page. I
>know how to create a rollover image and have that thrown up in CSS so that
>it looks like the black and white image lights up when you hover over it.
>Kewl.
>
>But I was thinking about this a little deeper and wondering if using a
>single image might not be better?


Wow, talk about serendipity.  (Christian, did you slip him a shilling 
to be your shill?)

Mark, FYI here's an earlier rendition of this idea:

CSS Sprites: Image Slicing's Kiss of Death
by Dave Shea
March 05, 2004
http://www.alistapart.com/articles/sprites/
(How to combine normal & hover states in the same image file)

A consideration when using this technique is that a combined image is 
larger than either of its parts and therefore there can be a longer 
download time the first time the page loads.  However, because every 
image file has a header, one file containing two images is going to 
be smaller than both images separately.*  If they all have to 
download anyway, you might as well combine them in a single 
file.  I've combined multiple sets of images in one file with a 
barely-noticeable initial delay even on dial-up.

* An exception to this sum-is-smaller-than-the-parts rule occurs when 
one of the two images is significantly less rich than the other; for 
example toggling from black & white to color.  A b&w image, or a very 
low-contrast image, can be much smaller than its brightly-colored 
counterpart.  Still, I'd use the technique because it's easy and 
simple and eliminates scripting.

Paul 

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: