Help with a multiple image replacement

[nutt318]

Hello,

I am trying to have say around 5 items in a list, and when one is hover over I would like an image to change. I just cannot figure out how to do this but I do have an example.

http://www.nationalspeedinc.com/about/

On the right hand side of the page they have 6 or so links, when you hover over one the image changes. I’ve been looking at their code and trying to google any type of examples but I am stumped on how to accomplish something like this.

Any ideas?

Thanks.

[jamygolden]

Check this out. If you stop before the javascript part, it does pretty much the same thing.

[nutt318]

Ok, css sprites sound like they will work, but I am having trouble thinking of the html on how i have a list of 5 items and only one image container that changes. Any examples?

Thanks

[rickylamerz]

Hey Nutt318, maybe this will help you on your way.

HTML:

Cars


Trucks


Flowers


Paintings


Customs

CSS:

div#imageContainer {background: url('images/spriteImage.jpg'; background-position:0px 0px;}

jQuery/Javascript

$(document).ready(function(){



$('ul li a').mouseenter(function(){



$('ul li a').css('font-weight','normal');



currentRel = $(this).attr('rel');

backgroundOffset = currentRel * 200; //taken your images are all 200px in height

$('div#imageContainer').css('background-position','0px -' + backgroundOffset + 'px');



$(this).css('font-weight','bold');

});



});

This should work, try it out.

[nutt318]

Hey rickylamerz,

Thanks for the help, I wish I knew more javascript.

Anyways, the top image of my sprite shows up but when i hover over the other links the image doesnt change.

Any ideas?

Thanks.

[rickylamerz]

Could you link me to the site? Or provide me with the code?

[nutt318]

Sent you a PM also, http://go-mcracing.com/about/ Is it OK to have the JavaScript in a .js file or does it need to be on that page?

[rickylamerz]

Haven’t got any PM’s do you have an IM client so I can help out quicker?

[nutt318]

.

[nutt318]

Marked as Solved, Thanks for the help rickylamerz!

[Author]

Posts