HTML/CSS Rollover State?

**Jon** · 12-06-2011, 02:43 PM

Hi there

I'm currently writing my first site using HTML.

For my main menu I have 4 different images linking to the 4 pages of my site. Is there any way that when you hover over these images they change? I'd like them to go from white text to grey text but I can change that using images.

I need a code to say if you have image_1.jpg, when the mouse hovers over it it changes to image_2.jpg.

I'd probably go with CSS as I have a sprite build but will need pretty much step by step instuctions of how to get this working as I'm not too experienced with HTML/CSS. If anyone could supply me a code that would be great.

I'm not sure if this can be done but if anyone has any alternatives I'd be happy to hear them

Cheers

**Mel** · 12-06-2011, 03:43 PM

a:link {
background-image:url('normalState.jpg');
}

a:hover {
background-image:url('hoverState.jpg');
}

**simbe1** · 12-06-2011, 03:52 PM

you need javascript to do this,here is your code.....
 <script language="javascript" type="text/javascript"> normal_image = new Image();
normal_image.src = "path/img.gif"; mouseover_image = new Image();
mouseover_image.src = "path/img2.gif";  function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src"); }
}
}
</script>  <a href="page.html" onMouseOver="swap('name_of_img','normal_image')"
onMouseOut="swap('name_of_img','mouseover_image')" >
<img name="name_of_img" src="path/img.gif" border="0"></a>