Add different images when mouse moving in jquery

Question

I'm trying to make a jquery code where you can show different images (1-3 different images) when you move the mouse around.

The images will be right beside the cursor, and they will only appear 1-3, not more than that. And each time the mouse moves, these images will change.

I currently have this as my html code,

  <div class="mainbody">
    <section class="container">
      <div class="img_div">
      </div>
    </section>
  </div>

And my jquery code looks like this:

let img_array = ['./img/awards_icon.png', './img/norinuri_icon.png'];
  $("div.mainbody").mousemove(function(e) {
    for(i=0; i<img_array.length; i++){
      $('.img_div').append("<img src='" + img_array[i] +"'/>");
      $('.img_div').fadeIn("5000");
      $('.img_div').finish().fadeOut("5000");
      $('.img_div').offset({
        left: e.pageX,
        top: e.pageY + 20
      });
    }
  });

The 2 images that I have in my jquery array appears when the mouse moves, but instead of only having 2 images these images add continuously, without stopping. So each time I would move my mouse, the images would continue to add infinitely.

I will add more images in the jquery array for sure, but how should I have only two images added, and change these images as I move the mouse?

Answer 1

I have created a working example for you. You can try it now:

<div class="mainbody">
<section class="container">
  <div class="img_div">
    hello
  </div>
</section>

css

.mainbody {
  border:1px solid red;
  display:block;
  height:1000px
}

jquery

let img_array = ['https://anotherjavaduke.files.wordpress.com/2018/08/avataaars-2.png', 
'https://images2.minutemediacdn.com/image/upload/c_crop,h_1192,w_2121,x_0,y_111/f_auto,q_auto,w_1100/v1554921884/shape/mentalfloss/22461-istock-176984635.jpg'];

$("div.mainbody").on('mousemove', function(e) {
    var i;
    $('.img_div').html('')

    for (i = 0; i < img_array.length; i++) {
        console.log($('.img_div').has('img').length)

        if ($('.img_div').has('img').length < img_array.length) {

            $('.img_div').append("<img style='width:100px; height:100px' src='" + img_array[i] + "'/>");
            $('.img_div').fadeIn("5000");
            $('.img_div').finish().fadeOut("5000");
            $('.img_div').offset({
                left: e.pageX,
                top: e.pageY + 20
            });


        }

    }
});

Working example [Codepen] https://codepen.io/prashen/pen/ZEEqJEo

Answer 2

Use background-image

var imageArr=["https://www.w3schools.com/css/paper.gif","https://www.w3schools.com/css/gradient_bg.png","https://www.w3schools.com/css/img_tree.png"];
var count=0;
$( ".mainbody" ).mouseover(function() {
  $( ".img_div" ).css('background-image', 'url("' + imageArr[count] + '")');
  if(count == imageArr.length-1)
    count=0;
  else
   count++;
});

.mainbody{
    width: 500px;
    height: 500px;
    border:1px solid red;
}
.img_div{
    width: 200px;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainbody">
  <section class="container">
    <div class="img_div">
    </div>
  </section>
</div>

Here is working fiddle;

USING mousemove (to avoid the images to change so many times while mouse move I use timeout)

var imageArr=["https://www.w3schools.com/css/paper.gif","https://www.w3schools.com/css/gradient_bg.png","https://www.w3schools.com/css/img_tree.png"];
var count=0;
var timeoutid = 0;

function setImage() {
  $( ".img_div" ).css('background-image', 'url("' + imageArr[count] + '")');
  if(count == imageArr.length-1)
    count=0;
  else
   count++;
}


$(".mainbody").mousemove(function() {
    clearTimeout(timeoutid);
    timeoutid = setTimeout(setImage, 100);
});

.mainbody{
    width: 500px;
    height: 500px;
    border:1px solid red;
}
.img_div{
    width: 200px;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainbody">
  <section class="container">
    <div class="img_div">
    </div>
  </section>
</div>

화이팅!