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

Чтобы показывать картинку или любой другой элемент на 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>


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


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

37

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