Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with a multiple image replacement Re: Help with a multiple image replacement

#72684
rickylamerz
Member

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

HTML:




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.