Hi,

Can someone please show me how to change the src from first.gif to second.gif on hovering / selction wih JavaScript DOM?

<img src="first.gif" alt="Some image" id="image" />

I have tried coding it myself, but I never quite get it to work so I would really like to see an example of how this is done.

document.getElementById("image").src = (your image source here.)

But how about the hovering part?

Why does this not work? I cannot find any errors and no debugging tools are of any help either...

<script type="text/javascript">
window.onload = openload;
function openload() {
document.getElementById('image').onmouseout = runaway;
document.getElementById('image').onmouseover = runbox;
}
function runaway() {
document.getElementById('image').src = 'http://img245.imageshack.us/img245/8126/runboxug7.png';
}
function runbox() {
document.getElementById('image').src = 'http://img100.imageshack.us/img100/4387/runboxoverhb6.png';
}
</script>

You're making this too copmlex. How 'bout <img src=x onmouseover=y onmouseout=z>? That will do it all for you, and not depend on the onload event.

Better yet though why don't you use CSS and bypass javascript all together?

You're making this too copmlex. How 'bout <img src=x onmouseover=y onmouseout=z>? That will do it all for you, and not depend on the onload event.

Better yet though why don't you use CSS and bypass javascript all together?

I've never been a fan of the CSS method personally. It doesn't cache images and can create a rather ugly delay effect. Javascript mouseovers have generally been much smoother. If you're going to do anything, do both.

I don't think onmouseover works on images either (although I've never tried.

You probably mean something like this.

<a href="#" onmouseover="runbox()" onmouseout="runaway()"><img src= ... ></a>

I've never seen a code sample like the one you've posted before. But I do know this way works...I've used it for years.