javascript изменить картинку после клика мышки
Тэги: javascript javascript полезные скрипты javascript onclick javascript setInterval
📅14-09-2017 👁786
Ниже представлен код который меняет текущую картинку с определенным 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 секунды и после автоматически опять станет размытой.
Оставить свой ответ:
