Изменение изображений с наведением указателя мыши в Javascript

Нужна помощь в изменении изображений при наведении указателя мыши и наведении указателя мыши на предварительно загруженные изображения. Я смог вычислить предварительную загрузку, но не могу изменить изображение. Если кто-нибудь может мне помочь, я буду очень признателен.

"use strict";
 var $ = function(id) { return document.getElementById(id); };

window.onload = function preload() {
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.mouseover=function(){
       image1=image.src = "images/release.jpg";
  };

  image1.onmouseout = function() {
    image1=image.src = "images/hero.jpg";

  };


    image2.onmouseover = function() {
    image.src = "images/deer.jpg";
};
    image2.onmouseout= function(){
    image.src = "images/bison.jpg";
};


};

javascript html

31.03.2018 02:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Способ заключается в изменении атрибута .src объекта изображения.

image1.src = "images/release.jpg";

вместо

image1=image.src = "images/release.jpg";

Хотя обычно мы не делаем этого с помощью javascript. Способ заключается в CSS, отображающем изображение как background-image элемента DOM и устанавливающем другой background-image на тот же элемент на :hover.

Хорошо, я заработал, спасибо. И да, я знаю, мне пришлось сделать это для моего класса javascript.

— 31.03.2018 02:30

31.03.2018 02:12

"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() {
        image1.src = "images/release.jpg";
    };
    image1.onmouseout = function() {
        image1.src = "images/hero.jpg";
    };
    
    image2.onmouseover = function() {  
        image2.src = "images/deer.jpg";
    };
    image2.onmouseout = function() {
        image2.src = "images/bison.jpg";
    };
};

Добро пожаловать в SO, Сюань Вэн! Здесь не приветствуются ответы, содержащие только код, поскольку они не дают представления о том, как была решена проблема. Пожалуйста, обновите свое решение, объяснив, как ваш код решает проблему OP :)

— 13.11.2018 02:32

13.11.2018 02:27

"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() {
        image1.src = "images/release.jpg";
    };
    image1.onmouseout = function() {
        image1.src = "images/hero.jpg";
    };
    
    image2.onmouseover = function() {  
        image2.src = "images/deer.jpg";
    };
    image2.onmouseout = function() {
        image2.src = "images/bison.jpg";
    };
};

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    background-color: white;
    width: 790px;
    margin: 0 auto;
    border: 3px solid blue;
    padding: 1em;
}
h1 {
    color: blue;
    margin: 0;
    padding: 0;
    text-align: center;
}
p {
    margin: 0;
    padding: .5em 0;
    text-align: center;	
}
ul { 
    display: none; 
}

<!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>

Добро пожаловать в SO, Сюань Вэн! Вы уже ответили на этот вопрос, поэтому было бы полезно, если бы вы удалили один из своих избыточных ответов (а также добавили пояснения к своему коду!)

— 13.11.2018 02:56

13.11.2018 02:35