Image Hover

paulnf

I have a register image that is a link. when the visitor hovers over the image i want to replace that image with another one. everything i've found on the web related to this is somewhat confusing. I can get it to partialy work with the code below but the original image will not go away instead it attempts to place the new image ontop of the iriginal.

<a href="registration.html"><img alt="Register new account" src= "Images/CreateAccount.gif"border="0 px"style="margin-left: 0px" height="45" />

here is the CSS section.

a:hover
	{    

		background-image: url('Images/CreateAccountHover.gif')
	}

nrg_alpha

At the top of my head, there is some issues here.
First, I would apply a class or id to the link image ('class' if this link will appear more than once in your XHTML document.. and 'id' if it will be unique).. the way you have it currently listed, every 'a' tag will be effected..

Since we are using background images in a link, I would go this way:

in your XHTML documtent..

<a href="registration.html" class="test"></a>

This looks odd at first, but we'll assign an image and some pixel dimensions to this empty link in css...

In your .css file:

a.test {float: left; width: XXpx; height: XXpx; background: url(/path_to_image/image_off.gif);}
a.test:hover {background: url(/path_to_image/image_on.gif);}

Of course, change the width and height dimensions in the first css rule to the dimensions of your 'off / on state' images, and ensure the directory paths and file name is correct.

Cheers,

NRG

paulnf

after seeing your post it made a lot more sence than they way i was attempting to do this. thanks for the help. After redoing this your way it worked great.

nrg_alpha

Glad it worked.. a few final notes.. this method I showed opens up a nice little trick to reduce the files size of images involved in the rollover, as well as reduce the amount of HTTP headers flying around between browser and server. This technique is known as 'CSS sprites'. Just google that term... there are plenty of articles on it..

but in a nutshell:

You could use one image that has both off and on rollover states into one graphic.. so say you had a button that was 30px height X 100px wide... you can create a single image that has both button states stacked (so the image would be 60px height X 100px wide.. and in the intial CSS rule you could instruct the background setup as such:

a.test {float: left; width: XXpx; height: XXpx; background: url(/path_to_image/image_off.gif) no-repeat 0 0;}

then for the rollover state:

a.test:hover {background: url(/path_to_image/image_on.gif) no-repeat 0 50%;}

So when the rollover kicks in, the background shifts vertically by 50%. In doing so, the total file size of the rollover image is smaller than the combined total of two separate images, and the request / response headers are reduced by one. The more related images you combine in a CSS Sprite sheet and use CSS for background shifting and isolation, the more memory and header chit-chat you save.. this effect can really help speed up site downloads and response times. Its a win win situation. You save bandwidth.. users get snappier sites (from an image handling standpoint). Just don't go too overboard in combining and using too many CSS background images.. as I believe this starts to become a burden on browser rendering performance.

Also, don't forget to flag this thread as 'resolved' in the tool threads dropdown menu 🙂

Cheers,

NRG