Changing images with mouseover in Javascript

Question

Need help changing the images with mouseover and mouse out with preloaded images. I was able to figure out the preloading but I can't get the image to change. If anybody can help me out it would be greatly appreciated.

"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";
};


};

Javier S · Accepted Answer · 2018-03-31 00:12:28Z

1

The way is changing the .src attribute of an image object.

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

instead of

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

Althought we don't usually do it with javascript. The way is with CSS, displaying the image as background-image of a DOM element and setting an other background-image on the same element on :hover.

answered Mar 31, 2018 at 0:12

Javier S

4165 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Benzola Over a year ago

Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.

Xuan Weng · Accepted Answer · 2018-11-13 01:27:21Z

0

"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";
    };
};

answered Nov 13, 2018 at 1:27

Xuan Weng

1

1 Comment

Joel Over a year ago

Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)

Xuan Weng · Accepted Answer · 2018-11-13 01:35:15Z

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

Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)

Collectives™ on Stack Overflow

Changing images with mouseover in Javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related