javascript изменить картинку после клика мышки

Ниже представлен код который меняет текущую картинку с определенным id на другую картинку, после клика мышки на этой фото.

 

<html><head><meta charset="utf-8"> <title>Image onclick</title>
<script>
function init (){
    var image = document.getElementById ("zero");
    image.onclick = showAnswer;
}
function showAnswer (){
    var image = document.getElementById ("zero");
    image.src = "X.jpg";
}
window.onload = init;
</script>
</head><body>
<img src="Y.jpg" id="zero">
</body></html>

 

После загрузки страницы появится картинка X.jpg, если на ней кликнуть мышкой то вместо нее появиться фото Y.jpg.

 

Следующий код позволяет менять по клику на фотках, если их много на странице. Каждая фото должна иметь свой уникальный id который должен совпадать с именем файла картинки, без расширения.

 

<html><head><meta charset="utf-8"> <title>Image onclick</title>
<script>
function init() {
    var images = document.getElementsByTagName ("img");
    for (var i=0;  i<images.length; i++) {
        images[i].onclick = showAnswer;
    }
}
function showAnswer (eventObj){
    var image = eventObj.target;// ссылка наэлемент на котором был щелчок (там тег img)
    var name = "img/" + image.id + ".jpg"
    image.src = name;
}
window.onload = init;
</script>
</head><body>
<img src="Y.jpg" id="Y0">
<img src="X.jpg" id="X0">
</body></html>

 

в этом коде после клика на Y.jpg фото заменится на Y0.jpg,

а при клике на X.jpg фотка заменится на X0.jpg

 

Как вернуть обратно размытую картинку через 2 секунды?

Для этого воспользуемся функцией setInterval.

Нужно в коде изменить только функцию showAnswer и добавить ниже еще одну,вот так:

function showAnswer (eventObj){
    var image = eventObj.target;
    var name = "img/" + image.id + ".jpg"
    image.src = name;
    p = setInterval (reBlur,2000,image);
}

function reBlur(image){
    var name = "img/" + image.id + "blur.jpg"
    image.src = name;
    clearInterval(p);
}

После клика на замыленное фото появится нормальная чистая фотка на 2 секунды и после автоматически опять станет размытой.


Другие ответы по вопросу javascript изменить картинку после клика мышки


Имя:*
E-Mail:
Напишите ваш ответ:

71

QQpedia.ru - cамые интересные вопросы