JavaScript - изображения при наведении и наведении курсора мыши
Я пытаюсь сделать простую программу, которая позволяет мне наводить указатель мыши на одно изображение, чтобы увидеть другое. Я действительно борюсь с тем, как обрабатывать первую функцию при наведении курсора мыши. Я понимаю, что imageNode не объявлен, но я не знаю, где его объявить и какую ссылку он будет хранить.
Если бы кто-нибудь мог указать мне в правильном направлении, чтобы заменить image1 другим изображением в HTML при наведении курсора мыши, а затем вернуться к image1 при наведении курсора мыши, я был бы очень признателен. Я действительно заблудился прямо сейчас.
Я включил HTML, а также приведенный ниже JavaScript.
Огромное спасибо,
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
window.onload = function() {
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i,
link,
image;
for ( i = 0; i < links.length; i++) {
link = links[i];
image = new Image();
image.src = link.href;
}
// attach mouseover and mouseout events for each image
image1.onmouseover = function(evt) {
link = this; //this is image that is mouseover
// set new image
//imageNode.src = link.getAttribute("href"
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel = "stylesheet" type = "text/css" href = "rollover.css">
<script type = "text/javascript" src = "rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id = "image_list">
<li><a href = "images/release.jpg" title = "Catch and Release"></a></li>
<li><a href = "images/deer.jpg" title = "Deer at Play"></a></li>
<li><a href = "images/hero.jpg" title = "The Big One!"></a></li>
<li><a href = "images/bison.jpg" title = "Grazing Bison"></a></li>
</ul>
<p>
<img id = "image1" src = "images/hero.jpg" alt = "">
<img id = "image2" src = "images/bison.jpg" alt = "">
</p>
</main>
</body>
</html>один.
Чистый CSS может это сделать в этом поколении.
Это работает для вас? jsfiddle.net/2q8n06yu/3
@DacreDenny CSS делает то же самое, но прямо сейчас я работаю над упражнением в книге, в котором говорится: «Добавьте код в обработчики событий mouseover и mouseout для двух элементов изображения, которые отображаются на странице. Элемент изображения с идентификатором «image1» должен отображать изображение release.jpg, когда на него наведен указатель мыши, и изображение hero.jpg в противном случае. Элемент изображения с идентификатором «image2» должен отображать изображение deer.jpg, когда на него наведена мышь, и изображение зубра .jpg в противном случае "
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если у вас есть HTML, например <div id = "image-rollover"></div>,
вы можете отключить изображение при наведении, используя только css:
#image-rollover {
background-color: #000;
background-image: url('SOME_IMG_URL');
background-size: cover;
height: 100px;
width: 100px;
}
#image-rollover:hover {
background-image: url('SOME_OTHER_IMG_URL');
}
Пример в JSFiddle
Это полностью сработает! Я пытаюсь придумать упражнение в книге, над которой работаю, в которой говорится: «Добавьте код в обработчики событий mouseover и mouseout для двух элементов изображения, которые отображаются на странице. Элемент изображения с идентификатором« image1 » должен отображать изображение release.jpg, когда на него наведен указатель мыши, и изображение hero.jpg в противном случае. Элемент изображения с идентификатором «image2» должен отображать изображение deer.jpg, когда указатель мыши находится над ним, и изображение bison.jpg в противном случае »
Вы можете сделать это в Javascript простым методом:
var imgOnMouseOver = "OVER_IMG_URI";
var imgOnMouseOut = "OUT_IMG_URI";
var container = document.getElementById("IMG_TAG_ID");
container.addEventListener("mouseover", function(){
container.setAttribute("src", imgOnMouseOver);
});
container.addEventListener("mouseout", function(){
container.setAttribute("src", imgOnMouseOut);
});
Пример программы отлично работает: https://jsfiddle.net/praveen17/tv8xu67f/2/
Привет @Praveen, Спасибо за ответ. В чем отличие от использования: container.addEventListener ("mouseover", function () и image1.onmouseover = function (evt)
image1.onmouseover = function() {
image1.src = "images/hero.jpg"
};
image1.onmouseout = function() {
image1.src = "images/release.jpg"
};
image2.onmouseover = function() {
image2.src = "images/deer.jpg"
};
image2.onmouseout = function() {
image2.src = "images/bison.jpg"
};
};
пожалуйста, дополните
Это возможно без javascript - вас заинтересует подход, не связанный с javascript?