PDA

View Full Version : ~ css rollover - another example ~

coothead
09-02-2004, 05:08 PM
Hi there folks,

here is another example of the 'css' rollover that you might find interesting.
It uses a single image like this...

http://www.coothead.co.uk/images/single_image_rollover.gif

...instead of two.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>CSS single image rollover</title>

<style type="text/css">
body {
background:#999;
}
#image {
display:block;
width:100px;
height:99px;
border:inset 8px #888;
margin:200px auto 0;
background:url(http://www.coothead.co.uk/images/single_image_rollover.gif) 0 0 no-repeat;
text-align:center;
font-family:arial,sans-serif;
font-size:1.1em;
color:#fa3999;
line-height:99px;
text-decoration:none;
}
#image:hover {
background-position:-100px 0;
color:#39fa99;
}
</style>

</head>
<body>

<div>
<a id="image" href="#">css rollover</a>
</div>

</body>
</html>
RysChwith
09-03-2004, 07:44 AM
So it just shifts the image to the side, with only the one color showing through the container at a time? Interesting.

Rys
coothead
09-03-2004, 09:30 AM
Hi there RysChwith,
So it just shifts the image to the side, with only the one color showing through the container at a time?
Yes that is correct, so there is no need for preloading and I believe that the rollover
will also be faster than when using two separate images.

Of course, it may take a little while longer to make the single image in an editor :D
I spent about an hour working on the animated gif :supereek:
coothead
10-19-2004, 04:03 PM
Hi there folks,

when I first did this thread I forgot to show a working example,
although a 'copy & paste' would have worked.

So here is the link...
the rollover (http://www.coothead.co.uk/sir.html)
AaronCampbell
10-20-2004, 12:54 PM
Nice on Coothead...I'm gonna put this in my "to use on future sites" folder :)
shinta_himura
02-14-2006, 09:40 PM
Wow cool! Good job!!! This is a revolutionary invention someone should give you money for this
welshsteve
05-26-2006, 08:35 AM
yeah good job. I'm working ona site at the moment where I want a normal image, a hover image, and an image to display when the particular page the link is for is displayed. I'm assuming I could apply the same theory for any number of images?
karinne
06-06-2006, 03:59 PM
Yes steve you can, just add another image in that one image :lol:

Kinda like here on Fast Rollovers Without Preload (http://www.wellstyled.com/css-nopreload-rollovers.html)

http://www.wellstyled.com/files/css-nopreload-rollovers/button.gif
imagn
07-27-2007, 02:01 PM
Using a simple JavaScript to change class names might be a better way to go.