Geek Answers Handbook

Change src image from multiple image lists using jquery

I want to change the src image on the main mouse image hover, I have one script, but it only works when there are two images, but I need to change the src image from several images.

My existing code is similar to

<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 the above code works 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 over image.jpg the first time it shows me image1.jpg, when the mouse displays the image .jpg, and when it displays me image2.jpg a second time, etc., when I find 6 times, it shows me image 1. jpg again.

Before editing, I only have one div, and the whole solution works for me, but I need some changes. If I have more than one than what I do for him.

Google , , , , , .

.

+4
7

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

JQuery

$(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();

    });
});

----------------------------- -------------- ------

HTML-

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

jQuery

$(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();
    });
});

fiddle

+1

- :

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 );
});

jquery,

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;
});
+2

jQuery, . , :)

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


})

$(function() {})

. " " .

script, , . div , , .

!

+1

: img img ( )

, img .

 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;
  }
}

enter image description here

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

p.s. , i. : $(this).index...

+1

.

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

, , , .

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

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

0
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");   
});
0

, , , ! , , 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;
  }
);
0

More articles:


All Articles