Как сменить изображение на другое?

Question

Я хотел бы знать, как я могу сделать изменение образа на другой, а затем вернуться к нормальной, так как следующий код не работает:

function change(){ 
    img = document.getElementById("img") 
    img.src = "Login_img2.jpg" 
    img.onclick = "change2()" 
} 

function change2(){ 
    img = document.getElementById("img") 
    img.src = "login_img3.jpg" 
    img.onclick = "changeN()" 
} 

function changeN(){ 
    img = document.getElementById("img") 
    img.src = "login_img1.jpg" 
    img.onclick = "change()" 
} 

Answer 1

Вы onclick функции быть немедленно вызывается так вы включаете () после функции (также, не цитируйте их!). Попробуйте изменить что-то вроде этого:

function change(){ 
    img = document.getElementById("img") 
    img.src = "Login_img2.jpg" 
    img.onclick = change2; 
} 

Answer 2

совершенно другой подход: Просто держать все изображения-источники в массиве и переменную, чтобы показать, что изображение в настоящее время показано на рисунке. Тогда вам просто нужно пройти через этот массив, не изменяя каждый раз кликер.

(function(){ 
    // list of images 
    var images = [ "login_img1.jpg", "login_img2.jpg", "login_img3.jpg" ], 
    // current shown image 
     curImage = 0; 

    // event handler 
    document.getElementById('img').addEventListener('click', function(){ 
    // get next image in line 
    curImage = (curImage + 1) % images.length; 
    // assign it 
    this.src = images[curImage]; 
    }); 
})(); 

Answer 3

Вы можете оформить скрипку http://jsfiddle.net/7pKxb/, которые могли бы дать вам некоторые идеи.

Я предпочитаю использовать флаг, то обмен между ними по щелчку

if (blFlag) { 
    blFlag = false; 
    oTux.setAttribute('src', 'http://tux.crystalxp.net/png/brightknight-tux-hatches-3796.png'); 
} else { 
    blFlag = true; 
    oTux.setAttribute('src', 'http://mascot.crystalxp.net/png/pit-tux-sonic-4206.png'); 
}