Question

I am trying to make a mouse roll-over. i.e when user places the pointer on the image mouse over event is triggered and the next image from the array comes over.But nothing is happening when i am running this script :

window.onload = startRollOver;

var pictures = new  Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg");
var i = 0;

function startRollOver() {
document.getElementById("picture").src.onmouseover = createRollOver();
}

function createRollOver() {
if(i<=7)
   return pictures[i++];
 if(i>7) {
    i=0;
    return pictures[i];
 }
}

Where am i going wrong ?

Answer 1

.src.onmouseover does not make much sense. You should assign a function to onmouseover so that the function gets called when the mouse moves over the element:

document.getElementById("picture").onmouseover = function() { // is executed when mouse is over element
    this.src = createRollOver(); // each time it is called, change the src
};

Also, you can use a more convenient way of declaring arrays:

["1.jpg", "2.jpg", ...]