I am using onmouseover and onmouseout in html to swap 2 images when the mouse hovers over the image. I am trying to place the 2nd image that replaces the original image in another spot on the page.

In other words, when you hover your mouse over a certain image, you will see that image change and you will see the image that it changed to in another location in the page, thus seeing 2 of the same image at the same time.

can anyone help with this thanks jb

  • So is this the same question as here (http://doctype.com/onmouseover-change-images-question)? And if it is, has it been answered? Mottie over 9 years ago

1 answer

Mottie 1134

You didn't state if you were planning on using jQuery or not, but I recommend it because it is easy to use. Anyway, I posted a demo for you here - basically both images are set to swap out (just by having the class="swap")


<img class="swap" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif" rel="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif">

<img class="swap" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif"  rel="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif">


   // Store original src in the element's data
   $(this).data('orig', this.src )
  // Add image hover functionality
  $(this).attr('src', $(this).attr('rel'));
  $(this).attr('src', $(this).data('orig'));
Answered over 9 years ago by Mottie