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 almost 7 years ago

1 answer

Mottie 1134
1
point

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

HTML

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

jQuery

$(document).ready(function(){
 $('img.swap')
   // Store original src in the element's data
  .each(function(){
   $(this).data('orig', this.src )
  })
  // Add image hover functionality
 .hover(function(){
  $(this).attr('src', $(this).attr('rel'));
 },function(){
  $(this).attr('src', $(this).data('orig'));
 })
})
Answered almost 7 years ago by Mottie