javascript как открыть фото при наведении указателем мышки
Компьютеры / Программирование
Тэги: javascript javascript полезные скрипты javascript onmouseover
Тэги: javascript javascript полезные скрипты javascript onmouseover
📅15-09-2017 👁584
Чтобы показывать картинку или любой другой элемент на html страничке нужно воспользоваться обработчиками событий в javascript такие как onmouseover - которая реагирует на то, когда курсор находится над выбранным элементом (в нашем случае над фоткой) и onmouseout - когда курсор покидает границы элемента, срабатывает событие которое мы передаем в функции, которые меняют тег img:
<html lang="en"><head><meta charset="utf-8"> <title>Image onmouseover</title>
<script>
function init() {
var images = document.getElementsByTagName ("img");
for (var i=0; i<images.length; i++) {
images[i].onmouseover = showAnswer;
images[i].onmouseout = reBlur;
}
}
function showAnswer (eventObj){//получаем и объект события, в свойстве target элемент img
var image = eventObj.target;
//console.log(image.id);
var name = "img/" + image.id + ".jpg"
image.src = name;
}
function reBlur(eventObj){//получаем и объект события, в свойстве target элемент img
var image = eventObj.target;
var name = "img/" + image.id + "blur.jpg"
image.src = name;
}
window.onload = init; // чтобы обработчики событий назначились после загрузки всей страницы и могли найти выбранные элементы
</script>
</head><body><h1>Image onmouseover</h1>
<img src="img/zeroblur.jpg" id="zero">
<img src="img/zero1blur.jpg" id="zero1">
</body></html>Оставить свой ответ:
