Previous Message
Next Message

One-Image "Rollovers?"

Sent by Mark D Hiatt on 31 March 2006 16:04

This seems like it should be do-able. I just don't think I know how to do 
it. And at the end of the day, maybe it isn't even advantageous and I 
should revert back to the classic rollover with another image.
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. 
But I was thinking about this a little deeper and wondering if using a 
single image might not be better? Think of a domino, with one dot at the 
top and five dots on the bottom. One dot when the page loads, five dots 
when you hover the link. Can the single image serve for both states of the 
Link like that? 100x100 black and white on top, 100x100 full-on color on 
the bottom. A single 100x200 image. Normal state: the 100x100 at the top 
that is black and white. Hover over it, and the visible portion slides up 
and the 100x100 on the bottom, the full-color image, is visible.
This wouldn't require any JavaScript. It would require only one server hit 
for the image, though it would be slightly longer. It would even maybe get 
rid of the need for a preloader, wouldn't it? When the image comes in you 
have both sides, even though it's only the top you're looking at.
So, is this do-able? And if so, is there any real advantage? Does it 
degrade well? How can I position the image differently for a:link and 
a:hover, please?
Mark D Hiatt
"Better Documentation Through Science"
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: