How can I display random images each time an element is hovered?

Question

I'm trying to make different random images appear on each hover. When the mouse pointer goes away and hovers back to the element, I'd like a new image to appear. I've managed to allow an image to appear on mouse hover, but I can't get the image to be different on each new hover (without refreshing).

The image source is generated with PHP in and is shuffled, so I don't think I'll need multiple sources.

jsfiddle here: https://jsfiddle.net/6cn9xgz8/

Any suggestions would be much appreciated!

  <a class="onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Link
   <span class="target hidden">
    <div><img src="https://via.placeholder.com/150"></div>
   </span>
  </a>

.hidden {
  display: none;
}

.shown {
  display:block;
}

  $('.onhover-toggle-child-class').on(
    'mouseenter mouseleave',
    function() {
      var element = $(this);
      var selector = element.data('target');
      var child = element.find(selector);
      var classes = element.data('toggle');


      child.toggleClass(classes);
    }
  );

Similar solution is available in below link: https://stackoverflow.com/questions/51852037/show-random-image-on-hover — Shweta Ranpise, Jun 19 '19 at 05:53

score 0 · Accepted Answer · answered Jun 19 '19 at 06:01

The solution is you should create an array of the image link and using Math.floor(Math.random() * 5); get random index from the length

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .hidden {
            display: none;
        }

        .shown {
            display: block;
        }
    </style>
</head>

<body>
    <a class="onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Link
        <span class="target hidden">
            <div><img src="https://via.placeholder.com/150"></div>
        </span>
    </a>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script>
        var cars = ["https://via.placeholder.com/150", "https://via.placeholder.com/250", "https://via.placeholder.com/350","https://via.placeholder.com/450","https://via.placeholder.com/550"];

        $('.onhover-toggle-child-class').on(
            'mouseenter mouseleave',
            function () {
                var random = Math.floor(Math.random() * 5); // returns a random integer from 0 to 4
                var imageUrl = cars[random];
                $('img').attr("src", imageUrl);
                var element = $(this);
                var selector = element.data('target');
                var child = element.find(selector);
                var classes = element.data('toggle');


                child.toggleClass(classes);
            }
        );
    </script>
</body>

</html>

Hope this helped Thanks

Please ACCEPT this answer by clicking the green tick – HaSnen Tai Jun 19 '19 at 07:05 — HaSnen Tai, Jun 19 '19 at 07:05

score 0 · Answer 2 · answered Jun 19 '19 at 06:22

0

<script>
    var imagesArray = ["a.jpg", "b.jpg", "c.jpg", "d.jpg", "e.jpg", "f.jpg"];

    $(document).on("mouseenter", "#myImg", function(){
        var num = Math.floor(Math.random() * (imagesArray.length));
        var imgSrc= "'"+imagesArray[num]+"'";
        $(".randomImg").attr("src", imgSrc);
    });

</script>

<button id="myImg" type="button">Hover me</button>
<br><br>
<img src="default.jpg" class="randomImg" />

answered Jun 19 '19 at 06:22

Hemant Singh

1
1

Created an array with different images names.Then generated a random number between the array index range (0 to length-1). Used this random index to set the image attribute source each time user hovers on it. – Hemant Singh Jun 19 '19 at 06:30

How can I display random images each time an element is hovered?

2 Answers2