The css rollevrs are simple and though ti isn't JS I'll post it here since it may be of some use to you.

If it was just text you would use:

Code: Select all

a {
color: #000;
text-decoration: none;
}

a:hover {
color: #333;
border-bottom: #333 solid 1px;
}

The sam econcept applies if you are using images. The only difference is we use the background image property and have to remove the text from the html via css. The HTML document wouldn't actually change for these two examples.

Image replacement:

Code: Select all

a {
display: block;
width: 100px;
height: 30px;
text-indent: -9999px;
text-decoration: none;
background: #fff url('image.gif') 0 0 no-repeat;
}

a:hover {
background: #fff url('image_hover.gif') 0 0 no-repeat;
}

I'll explain. The display block just makes sure that we can set its size properly, as we have removed the text using text-indent: -9999px; there is nothing in the box so it would normally just collapse. We have set its dimensions so it stays the right size which will make our background image visible. The second part just changes the BG image.

The best method is to use a single image which has both states (link and hover) in it perhaps side by side. This way you can simply change the BG position on the a:hover. This will make the rollover seamless. I can give more info on this if you would like but I don't want to overload you. There a few tutorials knocking about on CSS Rollovers and BG position ones specifically.

Pete.