Member Avatar for vlowe

Hi, thanks for looking!

I am trying to replicate a mouseover image swap feature on multiple images like on this site - http://www.togsandclogs.com/latest-arrivals-12-w.asp


I have found some image swap scripts but finding it difficult to find something i can implement for multiple images as above.

The below works ok for a single image

<script type="text/JavaScript">
// Pre load images for rollover
if (document.images) {
smile = new Image
nosmile = new Image
 
smile.src = "1.png"
nosmile.src = "2.png"
}
 
 
function swapImage(thisImage,newImage) {
if (document.images) {
document[thisImage].src = eval(newImage + ".src")
}
}
</script>

<a href="#"
onMouseOver="swapImage('jack','smile')"
onMouseOut="swapImage('jack','nosmile')">
<img src="1.png"
width="100"
height="100"
border="0"
name="jack">
</a>

Any help would be great! thanks

  • 2 Contributors
  • 2 Replies
  • 394 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vlowe

Dani AI

Generated

Good question — there are two clean patterns for this that scale better than named images + inline handlers: 1) a CSS-based swap (sprites or background-image + :hover) for many small icons, or 2) a tiny, unobtrusive JS approach that uses data attributes, event listeners and proper preloading. Inline onmouseover/onmouseout works (see ) but gets hard to maintain when you have dozens of thumbnails.

A compact, maintainable JS pattern (markup + behaviour) looks like this:

<img class="swap" src="thumb1.jpg" data-hover="thumb1-hover.jpg" width="120" height="120" alt="product" />

<script>
const imgs = document.querySelectorAll('.swap');
const cache = [];
imgs.forEach(img => {
  cache.push(new Image().src = img.dataset.hover); // preload each hover image
  const original = img.src;
  img.addEventListener('mouseenter', () => img.src = img.dataset.hover);
  img.addEventListener('mouseleave', () => img.src = original);
});
</script>

Practical tips and gotchas: make sure swapped images share the same dimensions or set explicit width/height to avoid layout shifts; preload each hover image with a new Image object (don’t reuse a single hidden <img> if you want all files fetched reliably); add touch/click handlers for tablets/phones because mouse events don’t fire there; and if you’re serving many small icons, use a sprite sheet or image-combining techniques to reduce HTTP requests and improve performance.

’s inline approach is perfectly fine for a few images, and — glad you got it working. If you need help converting this to event delegation (one handler on the container) or switching to a sprite-based CSS solution, that’s the next easy step.

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

If you need an explanation of anything, just let me know.

<html>

<head>

</head>

<body>

<img id="imgPreload" src="" style="display: none;" />


<img id="swappable1" src="Images/add_16.png" onmouseover="swapImages(this, 'Images/add_32.png');" onmouseout="swapImages(this, 'Images/add_16.png');" />
<img id="swappable2" src="Images/arrow_down_16.png" onmouseover="swapImages(this, 'Images/arrow_down_32.png');" onmouseout="swapImages(this, 'Images/arrow_down_16.png');" />
<img id="swappable3" src="Images/arrow_left_16.png" onmouseover="swapImages(this, 'Images/arrow_left_32.png');" onmouseout="swapImages(this, 'Images/arrow_left_16.png');" />
<img id="swappable4" src="Images/arrow_right_16.png" onmouseover="swapImages(this, 'Images/arrow_right_32.png');" onmouseout="swapImages(this, 'Images/arrow_right_16.png');" />
<img id="swappable5" src="Images/arrow_up_16.png" onmouseover="swapImages(this, 'Images/arrow_up_32.png');" onmouseout="swapImages(this, 'Images/arrow_up_16.png');" />

<script>

preLoadImages(['Images/add_16.png', 'Images/add_32.png', 'Images/arrow_down_16.png', 'Images/arrow_down_32.png', 'Images/arrow_left_16.png', 'Images/arrow_left_32.png',
'Images/arrow_right_16.png', 'Images/arrow_right_32.png', 'Images/arrow_up_16.png', 'Images/arrow_up_32.png']);

function preLoadImages(arr){
	for(var i = 0; i < arr.length; i++){
		var img = document.getElementById('imgPreload');

		img.src = arr[i];
	}
}

function swapImages(control, image){
	control.src = image;
}

</script>

</body>

</html>
Member Avatar for vlowe

works thankyou

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.