MouseOver Images

JavaScript has changed so much in recent years that it is almost a completely different language from what it used to be back in the days of Netscape 4. One popular script back then which is still popular now is to have thumbnail images display on the page and have a larger image display based on which of the thumbnails the mouse was last hovered over.

For the purpose of showing the relationship between the CSS, HTML and JavaScript we will consider a large image in the centre of the page with three thumbnails down either side. The same JavaScript will work with any arrangement provided that the thumbnails and large image have appropriate classes applied to the div that wraps them. Note that we can have as many groups of thumbnails as we like without needing to change the scrip[t (unlike how the script used to be applied to each thumbnail image when such scripts were originally written).

Note that I believe each of the images used in this example to be in the public domain - if I have accidentally used an image for which you own the copyright then please let me know and I'll change it - you will also need to notify Google so they stop displaying sites showing your image as providiing public domain images.

Here's the CSS to display a large image with three thumbnails down either side (as you should see an example of above - but with the widths made somewhat smaller).

.thumbnails {width:140px; margin:10px; float:left;}
.thumbnails img {
height: auto; width:120px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview {float:left;}
.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
height: auto;
}

Here's the HTML.

<div class="thumbnails">
<img src="images/img1.jpg" alt=""/>
<img src="images/img2.jpg" alt=""/>
<img src="images/img3.jpg" alt=""/>
</div>
<div class="preview" >
<img src="images/img1.jpg" alt=""/>
</div>
<div class="thumbnails">
<img src="images/img4.jpg" alt=""/>
<img src="/images/img5.jpg" alt=""/>
<img src="images/img6.jpg" alt=""/>
</div>

The part of most interest here is the JavaScript.

(function() {
'use strict';
var main = document.querySelector('.preview img');
[].forEach.call(document.querySelectorAll('.thumbnails img'), function(el) {
el.addEventListener('mouseover', function() {main.src = el.src;}, false );
});
}());

This JavaScript applies the mouseover event listener to all the images wrapped in tags with a class="thumbnails" attribute and will apply the image at a larger size into each image wrapped in a class="preview". This assumes that the thumbnails are forced to display smaller than their actual size so that the full sized version will display properly. If you need to substitute different versions of the image then the assignment of one image source to the other in the JavaScript would need to be slightly modified.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate