Images are not trailing mouse

Question

I am trying to make an image get attached to the mouse and it isn't showing up correctly when I hover over the image. I need to make it so that the image preview that is trailing the mouse and is larger on the mouse preview.Could you please help me?

Here is the fiddle:

https://jsfiddle.net/pgyt1qpg/1/

here is the code:

document.querySelector('.container').addEventListener('mouseover', function(e) {
  e.preventDefault();
  if (e.target.tagName === 'IMG') {

    //create the div tag for preview
    var myElement = document.createElement('div');
    myElement.className = 'preview';
    e.target.parentNode.appendChild(myElement);
    //Create the image element for preview
    var myImg = document.createElement('img');
    var imgLoc = e.target.src;
    myImg.src = imgLoc;

    myElement.style.left = e.offsetX + 15 + 'px';
    myElement.style.top = e.offsetY + 15 + 'px';
    myImg.style.width = "500px";
    myImg.style.height = "500px";
    myElement.style.zIndex = "-1";
    myElement.appendChild(myImg);

    //When mouse goes out of the image delete the preview
    e.target.addEventListener('mouseout', function handler(d) {
      var myNode = d.target.parentNode.querySelector('div.preview');
      myNode.parentNode.removeChild(myNode);
      e.target.removeEventListener('mouseout', handler, false);
    }, false);

    //place the image 15 inches to the bottom, right of the mouse
    e.target.addEventListener('mousemove', function(f) {
      myElement.style.left = f.offsetX + 15 + 'px';
      myElement.style.top = f.offsetY + 15 + 'px';
    });

  }
}, false);

UPDATE:

I have updated the fiddle (many thanks to peter) and the image is on the right side now. I just need to make it closer to the mouse. How do I go about doing that?

What is not working ? Images having relative path will not be loaded in Fiddle... — Rayon, Feb 28 '16 at 02:35
The images aren't following the mouse whenever they are hovered and in my file, the previews of the images on the top are behind the images in the middle. — HawkBlade124, Feb 28 '16 at 02:41

score 0 · Accepted Answer · answered Feb 28 '16 at 03:18

0

Problem 1: Getting the hover preview to follow the mouse.

Solution: Add relative or absolute positioning.

myElement.style.position = 'absolute';

Problem 2: Getting the hover preview to appear above the thumbnails.

Solution (creates new problem though): Raise z-index to 2.

This will create the problem of the hover preview interrupting the hover event over the thumbnail when it appears. You can solve this by checking the mouse coordinates in the mouseout event and seeing if they are actually outside the bounds of the selected triggered thumbnail. If they are not, you cancel the preview close because it's just the interruption. There are other ways to do it but you seem comfortable with the coordinates so that's what came to mind.

Also, you need to adjust the mouse tracking coordinates to make it line up with the actual cursor better. That should get you moving, feel free to update the Fiddle and ask if there's more problems.

answered Feb 28 '16 at 03:18

Peter M. Elias

1,204
10
22

I have updated the fiddle and the image is on the right side of the mouse and is following the mouse perfectly. All I need, is the picture to be 15 pixels to the right and 15px below the mouse. When I changed the pixels on both of the offsets, it didn't work. what am I doing wrong? – HawkBlade124 Feb 28 '16 at 03:34
Okay, I read through that and I am thinking that in order to change the position of the image so it is set to 15px to the right, and 15px to the bottom, I need to use `pageX and pageY`' values right? – HawkBlade124 Feb 28 '16 at 03:53
You either need to use jQuery or you need to use that entire function (which is taken from jQuery) to correctly calculate the actual mouse coordinates. jQuery events contain the correct coordinates automatically and might make your life easier. – Peter M. Elias Feb 28 '16 at 03:55
Sounds good. But due to the lack of jQuery knowledge, I am unable to execute that code properly. – HawkBlade124 Feb 28 '16 at 04:03
Last question, how do I make the image preview for the mouse bigger than the image on the page using the DOM? – HawkBlade124 Feb 28 '16 at 04:52

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

I can't comment.. But to answer your last question in the answer's comments I believe you are going to have to do something like this.

You will have to reload the image to get the original size.

edited May 23 '17 at 12:31

Community

1
1

answered Feb 28 '16 at 05:10

fqhv

1,191
1
13
25

Thank you, I appreciate it! I have got it to the point where image follows the mouse, but I need to have image closer to the mouse. How do I do that? – HawkBlade124 Feb 28 '16 at 17:37

Images are not trailing mouse

2 Answers2