I am using this script to loop through images on mouseover. How do I make this work for multiple pictures on the same page?


<script>
var myImages = [1, 2, 3]
var img_index = 0;
var timer;
var imgId = "myImg";

// Start animation
function animate() {
me = document.getElementById(imgId);

me.src = "Pictures/" + "test" + myImages[img_index] + ".png"

img_index++;

if (img_index == myImages.length){
img_index = 0;
}
timer = setTimeout(animate, 500);

}

function stopAnimation() {
clearTimeout(timer);
me.src="Pictures/test1.png"
}
</script>

<img class= "format" id="myImg" onmouseover="imgId = this.id; timer = setTimeout(animate, 1000);" onmouseout="stopAnimation();" src="Pictures/test1.png" />