I have got a div area called navigation, 600px wide and 100px high, with 5 hyperlinks in a ul li list all around 97px wide. In their normal state I want them to be just plain text on the background but when they are hovered over I want the link to have an image background, how would I do this?

 

The links are 5 seperate .png files 52px wide and 97-100px wide

 

Thanks

pretty straight forward, add a hover peado element on the end of the <a> tag, can't bee too specific without seeing your code but something like this:

 

 

For the normal state you would add something like:

 

#navigation li a {

background: #colour;

text-decoration:none;

}

 

Then add:

 

#navigation li a:hover {

background-image: url('background.png') no-repeat;

}

 

You would have to adapt it to how you've written the css for your nav and add any positioning other than the default top left but apart from that it should work fine.

 

The code above is an addition as I'm assuming you've got the other necessary css styling in place.