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

<a href="#"
<img src="1.png"

Any help would be great! thanks

Recommended Answers

All 2 Replies

Member Avatar

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





<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');" />


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;




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, learning, and sharing knowledge.