Thread: A quick tip for complete beginners for JS: Rollover images

To avoid writing painfully long JS for it, I've fount that it's easier to simply write this:

Code:

<script type="text/javascript">
function over() 
{
document.button1.src ="image2.gif" //This event occurs the rollover
}
function out()
{
document.button1.src ="image1.gif" //This is the original image that returns after the mouse has been moved away from the image
}
</script>

Which is written in the HTML like this:

Code:

<img src="image1.gif" onMouseover="over()" onMouseout"out()" name="button1" alt="image" />

Just thought about it now.

It's bad practise to add all the onMouseOver stuff to the element itself. You should give it an id and select it:

Code:

var myImg = document.getElementById("imgid");

And do this:

Code:

myImg.onMouseover = over();
myImg.onMouseout = out();

Thanks. Never thought it could be written like that!

sorry, but I still prefer css, you can do that anyway and it cant be switched off

True, but sometimes I fancy writing some JS for it.