Change image src from multiple image list using jquery

Question

I want to change image src on main image mouse hover i have one script but it work only when two images but i need to change image src from multiple images.

My existing code is like

<img width="220" height="220" alt="DE709 Folding Sunglasses" src="/images/7804/1__63824.1339534463.220.220.jpg" onmouseover="this.src='/images/x/319/1__53737.JPG'" onmouseout="this.src='/images/7804/1__63824.1339534463.220.220.jpg'">

And above code is working fine for me but i want something like this

    <ul class="ProductList List">
        <li class="Odd" style="height: 220px;">
             <div data-product="1233" class="ProductImage QuickView" style="height: 244px; width: 220px;"> 
          <a href="#">
             <img alt="DE709 Folding Sunglasses" src="/images/7804/1__63824.1339534463.220.220.jpg">
             <img style="display: none;" width="220" height="220" src="/product_images/x/319/1__53737.JPG">
              <img style="display: none;" width="220" height="220" src="/product_images/w/307/1__63824.jpg">
              <img style="display: none;" width="220" height="220" src="/product_images/l/017/DE-DISPLAY-BOX__82034.jpg">
          </a>
         <div>
       </li>
       <li>
            <div data-product="1234" class="ProductImage QuickView" style="height: 244px; width: 220px;">
            <a href="#">
            <img alt="Designer Eyewear™ Folding Sunglasses DE706" src="/images/10064/DE706__95146.1346109648.220.220.jpg" />
            <img width="220" height="220" src="/product_images/u/773/2__48597.JPG" style="display: none;">
             <img width="220" height="220" src="product_images/w/403/1__41999.JPG" style="display: none;">
             <img width="220" height="220" src="product_images/r/222/DE-DISPLAY-BOX__17353.jpg" style="display: none;"></a>
          </div>
      </li>


    </ul>

when i hover on image.jpg first time it will show me image1.jpg when mouse out it shows image.jpg and when second time it display me image2.jpg and so on when i hover 6 time it shows me image1.jpg again.

before edit i have only one div and all the solution are work for me but i need some changes on it. If I have more than one than what i do for it.

I search on Google from long time but not getting proper idea so please suggest me how can i achieve my goal.

any good link or suggetion help me great.

Answer 1

Now see updated code for multiple div

<div>
       <img class="parent " src="image.jpg"" data-pos = '0' />
       <div>
         <img class="img" style="display:none" src="image1.jpg"" />
         <img class="img" style="display:none" src="image2.jpg"" />
         <img class="img" style="display:none" src="image3.jpg"" />
         <img class="img" style="display:none" src="image4.jpg"" />
         <img class="img" style="display:none" src="image5.jpg"" />
      </div>
<div>

<hr>

<div>
       <img class="parent " src="image.jpg"" data-pos = '0' />
       <div>
         <img class="img" style="display:none" src="image1.jpg"" />
         <img class="img" style="display:none" src="image2.jpg"" />
         <img class="img" style="display:none" src="image3.jpg"" />
         <img class="img" style="display:none" src="image4.jpg"" />
         <img class="img" style="display:none" src="image5.jpg"" />
      </div>

<div>

and Jquery for it is

$(document).ready(function(){
    var pos = 0;
    $('.parent').bind('mouseover',function(){
        pos = $(this).data('pos');
        $(this).next('div').find('.img').eq(pos%5).show();
        $(this).hide();
        pos++;
        $(this).data('pos',pos);
    });
    $('.img').bind('mouseout',function(){
        $(this).hide();
        $('.parent').show();

    });
});

----------------------------- Below Was Old Answer --------------------

Use following HTML code

<div>
<img class="parent " src="image.jpg" />
  <img class="img" style="display:none" src="image1.jpg" />
  <img class="img" style="display:none" src="image2.jpg" />
  <img class="img" style="display:none" src="image3.jpg" />
  <img class="img" style="display:none" src="image4.jpg" />
  <img class="img" style="display:none" src="image5.jpg" />

</div>
<div>

And this jQuery stuff

$(document).ready(function(){
    var pos = 0;

    //hide parent image and show one of the child image
    $('.parent').bind('mouseover',function(){
        $('.img').eq(pos%5).show();
        $(this).hide();
        pos++;
    });

    //hide child images and show parent image
    $('.img').bind('mouseout',function(){
        $('.img').hide();
        $('.parent').show();
    });
});

here is fiddle

Answer 2

You should do something like this:

var images = $( 'img' );
var first_image = $( images[ 0 ] );
var original_src = images[ 0 ].src
var count = 0;

first_image.hover(function(){
    count++;
    if( count >= images.length ) { count = 1; }
    first_image.attr( 'src', $( images[ count ] ).attr( 'src' ) );
}, function() {
    first_image.attr( 'src', original_src );
});

or even better trying to use jquery the less you can

var images = $( 'img' );
var first_image = images[ 0 ];
var original_src = images[ 0 ].src
var count = 0;

first_image.hover(function(){
    count++;
    if( count >= images.length ) { count = 1; }
    first_image.src = images[ count ].src;
}, function() {
    first_image.src = original_src;
});

Answer 3

Since the question is tagged with jQuery, I made a quick solution. It's not thoroughly testet, but it works :)

http://jsfiddle.net/D3RLH/

$("img").addClass("hidden");
$("img:first").removeClass("hidden").addClass("current");

$("img").on("mouseout",function(){
$(this).removeClass("current").addClass("hidden");
$(this).next("img").removeClass("hidden").addClass("current");

   if($(".current").length == 0)
   {
       $("img:first").removeClass("hidden").addClass("current");
   }


})

It should be in your $(function(){})

What it basically does is to show the next picture on mouseout. In case there's no "next picture", it shows the first picture.

What you'll need to do about the script, is to wrap it up in e.g. a div and update selectors to make sure it doesn't involve all pictures on your page.

Enjoy!

Answer 4

Try this : This will literally display each img and treats each img as its own (using future listener)

no classes , no displaying all images in same img with different source.

 var working=false,_=$('img'),i=0;

$('body').on('mouseenter','img:visible',function (){
  if (working) return;
  working=true;
  go($(this));


}).on('mouseout','img:visible',function (){

  _.hide().eq(0).show();
       working=false;
});

function go(t)
{ i++;
   _.eq((i)%_.length).show();
  t.hide();
  if (i==_.length)
  {
   _.eq(1).show();
    i=1;
  }
}

http://jsbin.com/ujUYiveN/13/edit

p.s. this can be even better , without the i counter. just to use : $(this).index...

Answer 5

var no = 0;
var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg']
$('img').on('hover', function () {  
    if (no>5){
        $(this).src(images[no]);
        no++;   
    }
    else {
        no =0;
        $(this).src(images[no]);
    }
}, function () {
    $(this).src("image.jpg");   
});

Answer 6

First I would set some Id's.

<img id="img" src="image.jpg" onmouseover="SetHover();" onmouseout="SetOut();" />
<img id="1" style="display:none" src="image1.jpg" />
<img id="2" style="display:none" src="image2.jpg" />
<img id="3" style="display:none" src="image3.jpg" />
<img id="4" style="display:none" src="image4.jpg" />
<img id="5" style="display:none" src="image5.jpg" />

Then keep the index of the image that I want to show in a variable and use that for what you need.

var hoverIndex = 1;

function SetHover()
{
  $("#img").attr("src",$("#"+hoverIndex).attr("src"));
  if(hoverIndex < 5)
    hoverIndex++;
  else
    hoverIndex= 1;
}

function SetOut()
{
  $("#img").attr("src","image.jpg");
}

Check this jsbin http://jsbin.com/OBiNoSe/2/edit

Answer 7

Okay, I just spent a while hard coded this for you, you better select me as an answer! See demo here It not only works for a given number of images, but also works on any number, if the images are generated from a cms.

var original = $('.hover_img').src;
var obj = $('.hover_img');
var arr = $.makeArray(obj);
var len = arr.length;
var indexNum = 0;

$(".cover_img").mouseover(
  function() {
      $(this).css("display", "none");
  $(arr[indexNum]).css("display", "block");
  }) ;
$(".hover_img").mouseout(
      function() {
  $(".cover_img").attr('src',original);
      $(".cover_img").css("display", "block");
      $(arr[indexNum]).css("display", "none");
      indexNum++;
      if (indexNum == len) indexNum = 0;
  }
);