Onmouseover display multiple images

JavaScript
1

I want to implement on mouseover display an array of images maybe up to 3 different images then onmouseout the default images is displayed. I’ve been able to do just single image onmouseover as shown below. How can I implement multiple images?

<img src=“uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg” onmouseover=“this.src=‘uploads/products/thumbs/1532687679back_dt_0045.jpg’” onmouseout=“this.src=‘uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg’” />

2

One of the first keys to your success here is to separate the JavaScript from your HTML content.

The easiest way to do this is to give the image a unique identifier so that the script can then easily refer to that image tag. This can be later on removed depending on how the rest of the your images are structured.


<img id="hover" src="uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg" />

Each of those online events gets assigned to a function, so this will result in the same existing behavior, with the ability to extend things to achieve better flexibility.


var img = document.getElementById('hover');

img.onmouseover = function () {
    this.src = 'uploads/products/thumbs/1532687679back_dt_0045.jpg';
};
img.onmouseout = function () {
    this.src = 'uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg';
};

Since it’s preferable to keep things like image links in with the content, we can easily make the script more generic by using some data tags on the image.


<img id="hover" src="uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg" data-hover="uploads/products/thumbs/1532687679back_dt_0045.jpg" />

We can now have the script set a data-image value so that it can easily switch back to the original image when the mouseout event occurs, which allows the script to switch the image now without needing to have any URL links in the script.


var img = document.getElementById('hover');

img.setAttribute('data-image', img.src);
img.onmouseover = function () {
    this.src = this.getAttribute('data-hover');
};
img.onmouseout = function () {
    this.src = this.getAttribute('data-image');
};

This is now a technique that can be applied for multiple images.

Where we go from here though depends on what is meant by:

Are you wanting to setup several images so that only the one that you hover over is the image that changes?
or, are you wanting to hover over an image and have several other images change at the same time?

3

Thanks for the lead.

What I meant is this. I want when I hover, up to 3 other instances of the same product tween across and onmuseout the default image is displayed again. Please can you guide me on how to achieve it.

4

After implementing this, I get this error in my error console

Error: TypeError: img is null

What could be wrong?

5

What could be wrong is that the script has not been placed at the end of the body. That is the best location for virtually all scripts nowdays.


<html>
<head>
   ...
</head>
<body>
    ...
<script src="script.js"></script>
</body>
</html>
6

Thanks as placing it at the end of the body worked however,I fell into another challenge.

It works only for the first image in the row. Other images don’t hover. How do I get it to work for every other image assuming 50 images are on display?

Thanks once again for your time and help.