HTML/CSS Rollover State?

J

Jon

New member
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
 
you need javascript to do this,here is your code.....
<!-- place the following code within the <BODY> of your document --> <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"; <!-- repeat the 4 lines above for any subsequent images. --> 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> <!-- Place this code where you want the rollover buttons to appear.
Parts to change here: name_of_img (to match <img name="", below),
Image variable (e.g mouseover_image/normal_image - to match above code),
href element to your documents url and the img name & src. --> <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>
 
Back
Top