CODEWITHSUNDEEP
javascriptjqueryhtml
Albano Albanese
Albano Albanese

Reputation: 213

How to change images on mouse over with javascript?

<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo">

Is there anymethod to rotate thumbnails on mouse hover every second with javascript like many video tube sites?

I have a video gallery and I have multiple thumbs option but I dont know if its possible to change every second the images listed above.

Upvotes: 3

Views: 154

Answers (3)

CertainPerformance
CertainPerformance

Reputation: 371128

Use a setInterval that gets added on mouseenter and cleared on mouseleave, something like this:

let hoverInterval;
let visibleIndex = 0;
const container = document.querySelector('#container');
container.addEventListener('mouseover', () => {
  hoverInterval = setInterval(() => {
    container.children[visibleIndex].style.display = 'none';
    visibleIndex++;
    container.children[visibleIndex].style.display = 'block';
  }, 1000);
});
container.addEventListener('mouseleave', () => clearInterval(hoverInterval));
<div id="container">
<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo" style="display:none">
</div>

Upvotes: 0

user1636522
user1636522

Reputation:

Here is a possible solution :

var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img").map(function () {
  return $(this).attr("src");
}).get();

$("img:gt(0)").remove();
$("img").hover(function () {
  var $this = $(this);
  tid = setInterval(function () {
    i = (i + 1) % images.length;
    $this.attr("src", images[i]);
  }, 1000 * sec);
}, function () {
  clearInterval(tid);
  $(this).attr("src", images[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.sstatic.net/BDcMh.gif">
<img height="150" src="https://i.sstatic.net/vfQCT.gif">
<img height="150" src="https://i.sstatic.net/MbEgw.gif">
<img height="150" src="https://i.sstatic.net/uCCEw.gif">
<img height="150" src="https://i.sstatic.net/iO6QE.gif">

As an alternative, you could switch between a static GIF and an animated GIF :

var gif = "https://i.sstatic.net/1IpaB.gif";
var agif = "https://i.sstatic.net/yYrPT.gif";

$("img").hover(function () {
  $(this).attr("src", agif);
}, function () {
  $(this).attr("src", gif);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.sstatic.net/1IpaB.gif">

To make the GIF that you can see in the above code snippet, I have converted a WEBP image from Youtube thanks to this online tool : https://ezgif.com/webp-to-gif.

Upvotes: 2

Murat Baştaş
Murat Baştaş

Reputation: 156

You can do it like following...

<style type="text/css">
  .mvThumbs {
    position: relative;
  }
  .mvThumbs .mvThumb {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>

<div class="mvThumbs">
  <img src="http://lorempixel.com/400/200/sports/1/" class="mvThumb" alt="" title="" id="thumb_i84bdg">
  <img src="http://lorempixel.com/400/200/sports/2/" class="mvThumb" alt="" title="" id="thumb_i84xjz">
  <img src="http://lorempixel.com/400/200/sports/3/" class="mvThumb" alt="" title="" id="thumb_i84yrh">
</div>

<script type="text/javascript">
  $('.mvThumbs img:gt(0)').hide();
  $(".mvThumbs").hover(function() {
    window.timer = setInterval(function() {
      $('.mvThumbs :first-child').fadeOut().next('img').fadeIn().end().appendTo('.mvThumbs');
    }, 1000);
  }, function() {
    clearInterval(window.timer);
  });
</script>

Upvotes: 2

Related Questions