How To Change An Image Source On Hover?

December 13, 2023 Post a Comment

I want to change image source using jQuery but with animation. I have a default straight looking image. I have 5 different images with a head looking at different directions. on ho

Solution 1:

Given the fact you are using the full-size images already, then a CSS-only solution could be used, since no additional bandwidth is needed to load the large pictures:

CSS-only:

.thumb{ 
  width: 50px; 
  display: inline-block;
}

.thumb:hover  ~ .big.default{ opacity:0; }


.thumb:nth-child(1):hover ~ .big > img:nth-child(1){ z-index:5; opacity:1; }
.thumb:nth-child(2):hover ~ .big > img:nth-child(2){ z-index:5; opacity:1; }
.thumb:nth-child(3):hover ~ .big > img:nth-child(3){ z-index:5; opacity:1; }
.thumb:nth-child(4):hover ~ .big > img:nth-child(4){ z-index:5; opacity:1; }
.thumb:nth-child(5):hover ~ .big > img:nth-child(5){ z-index:5; opacity:1; }

.big{ position:relative; } 
.bigimg{ 
  position:absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .2s .1s ease-out;
}

.big.default{ opacity:1; }

<imgsrc="https://i.ibb.co/rxX8VMq/left.png"class='thumb'><imgsrc="https://i.ibb.co/r77CrCC/topleft.png"class='thumb'><imgsrc="https://i.ibb.co/CzRdRtp/top.png"class='thumb'><imgsrc="https://i.ibb.co/L8cSs3p/topright.png"class='thumb'><imgsrc="https://i.ibb.co/D1cjqfD/right.png"class='thumb'><divclass='big'><imgsrc="https://i.ibb.co/rxX8VMq/left.png"><imgsrc="https://i.ibb.co/r77CrCC/topleft.png"><imgsrc="https://i.ibb.co/CzRdRtp/top.png"class='default'><imgsrc="https://i.ibb.co/L8cSs3p/topright.png"><imgsrc="https://i.ibb.co/D1cjqfD/right.png"></div>

It's much easier to generate the above CSS using pre-processors (like SCSS)

Solution 2:

Ok so this is a modified version that animates the main, not any of the thumbnails.

On hover the thumbnail gets a class of active
- The main image is faded out
- The main is replaced with the src of the thumbnail
- The main is faded in
On hover end, remove the class active from the thumbnail
- Start a timeout of 300 milliseconds
  - If no thumbnail is active after 300 milliseconds, revert the main back to the default image

Baca Juga

var $thumbnails = $('#thumbs img');
var $main = $('#main');

$main.data('originalSrc', $main.attr('src'));

$thumbnails.on('mouseenter', function(e){
  e.target.classList.add('active');
  
  $main.finish().fadeOut(500, function(){
    $main.attr('src', e.target.getAttribute('src'));
    $main.fadeIn(500);
  });
});

$thumbnails.on('mouseleave', function(e){
  e.target.classList.remove('active');
  
  setTimeout(function(){
    if ($thumbnails.filter('.active').length < 1) {
      $main.prop('src', $main.data('originalSrc'));
    }
  }, 200);
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="thumbs"><imgsrc="https://i.ibb.co/rxX8VMq/left.png"width="50"height="50"><imgsrc="https://i.ibb.co/r77CrCC/topleft.png"width="50"height="50"><imgsrc="https://i.ibb.co/CzRdRtp/top.png"width="50"height="50"><imgsrc="https://i.ibb.co/L8cSs3p/topright.png"width="50"height="50"><imgsrc="https://i.ibb.co/D1cjqfD/right.png"width="50"height="50"></div><imgid="main"src="https://i.ibb.co/3dMWhqV/default-head.png">

Solution 3:

  $('#thumbs img').hover(function(event){
   $('#thumbs img').finish();    
        var thisSRC=$(this).attr('src');
        $('#main').fadeTo(500, 0.5);
        $('#main').finish();
        $('#main').fadeTo(500, 1).attr('src',thisSRC);        
  });

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="thumbs"><imgsrc="https://i.ibb.co/rxX8VMq/left.png"width="50"height="50"><imgsrc="https://i.ibb.co/r77CrCC/topleft.png"width="50"height="50"><imgsrc="https://i.ibb.co/CzRdRtp/top.png"width="50"height="50"><imgsrc="https://i.ibb.co/L8cSs3p/topright.png"width="50"height="50"><imgsrc="https://i.ibb.co/D1cjqfD/right.png"width="50"height="50"></div><imgid="main"src="https://i.ibb.co/3dMWhqV/default-head.png">

Solution 4:

You should fadeOut first and when it's finished, change the source and do a fadeIn in the finished callback.

$('#thumbs img').hover(function(event) {
  var thisSRC = $(this).attr('src');
  $('#main').fadeOut(300, function() {
    $('#main').attr('src', thisSRC);
    $('#main').fadeIn(300)
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="thumbs"><imgsrc="https://i.ibb.co/rxX8VMq/left.png"width="50"height="50"><imgsrc="https://i.ibb.co/r77CrCC/topleft.png"width="50"height="50"><imgsrc="https://i.ibb.co/CzRdRtp/top.png"width="50"height="50"><imgsrc="https://i.ibb.co/L8cSs3p/topright.png"width="50"height="50"><imgsrc="https://i.ibb.co/D1cjqfD/right.png"width="50"height="50"></div><imgid="main"src="https://i.ibb.co/3dMWhqV/default-head.png">

Html5 Tutorial