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
  • 373 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vlowe
Member Avatar for stbuchok

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.