~ css rollover - another example ~ - HTML Forums

coothead · 09-02-2004, 04: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...

...instead of two.

Code:


<!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, 06: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, 08:30 AM

Hi there RysChwith,

Quote:

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

I spent about an hour working on the animated gif

coothead · 10-19-2004, 03: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

AaronCampbell · 10-20-2004, 11:54 AM

Nice on Coothead...I'm gonna put this in my "to use on future sites" folder

shinta_himura · 02-14-2006, 08:40 PM

Wow cool! Good job!!! This is a revolutionary invention someone should give you money for this

welshsteve · 05-26-2006, 07: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, 02:59 PM

Yes steve you can, just add another image in that one image

Kinda like here on Fast Rollovers Without Preload

imagn · 07-27-2007, 01:01 PM

Using a simple JavaScript to change class names might be a better way to go.