use js more than once in the same page

what I'm doing is very simp开发者_开发知识库le, I do change the image source when the mouse pass over it then put the old one back when its out..

<img id="Image1" src="../../Images/M2.jpg" onmouseover="roll_over('../../Images/M3.jpg','Image1')" onmouseout="roll_over('../../Images/M2.jpg','Image1')"/>

using this javascript:

function roll_over(img_src,id) {
document.getElementById(id).src = img_src;
}

I found that JavaScript doesn't update the image as it moves to another image, it only change the first image that the mouse pass over it, and I need it to change every image it passes over.

wt can I do to solve this situation?

Try rewriting it like this:

function roll_over(ctrl, img_src) {
   ctrl.src = img_src;
}

<img id="Image1" src="../../Images/M2.jpg" onmouseover="roll_over(this, '../../Images/M3.jpg')" onmouseout="roll_over(this, '../../Images/M2.jpg')"/>