Javascript background rollover buttons

[groundzeroginge1]

Hi guys,

I was just wonder if and how I would have a button that swapped the background image with a fade on mouse over then went back to original without the mouse on. Also this needs to hold text on top so this is why it prefereably needs to be a background image attribute.

Thanks Guys.

[RonPK]

Let's say your button is an <a> element that you've styled with css.

<a href="#" onclick="clickHandler(); return false;" onmouseover="doMouseOver(this)" onmouseout="doMouseOut(this)">text on top</a>

<script>
function doMouseOver(el) {
el.style.backgroundImage = "url(images/fade.png)";
}
function doMouseOut(el) {
el.style.backgroundImage = "url(images/normal.png)";
}
</script>