检测鼠标在图像上的位置

Question

On an image (slideshow) I would like to detect on which side the courser is placed. eg the left-half side of the image or the right-half side of the image. I would like to show an arrow (left and right) when the user is mouseover the image and depending on the location I will show the right or the left arrow. I just need to know how to achieve the detection of the mousemove over the image. Thanks!

Answer 1

Use event onmouseenter and onmouseleave in img tag or div tag (you can divide two areas left-right in slideshow)

For example:

<img onmouseenter="showArrow(position)" onmouseleave="hideArrow(position)" src="">

• onmouseenter when the mouse pointer onto an image
• onmouseleave when the mouse pointer out of an image

Answer 2

var imageElement = document.querySelector('.imageElement');
var arrowsElemennt = document.querySelector('.arrowsElement');

var setStatusForArrows = function(status){return function(){arrowsElement.style.display = status}};

imageElement.addEventListener('mouseover',setStatusForArrows('block'));
imageElement.addEventListener('mouseout', setStatusForArrows('none'));

Answer 3

This is some code that is able to detect the relative cursor position over an image. You could repurpose this to show/hide your arrow icons based on its return value (instead of the console.log).

Added mouseout listener for auto-hiding arrows.

 const img = document.getElementById('imageTest'); const [imgRects] = img.getClientRects(); // let showLeftArrow = false; // let showRightArrow = false; img.addEventListener('mouseover', evt => { const distanceLeft = Math.abs(evt.clientX - imgRects.left); const distanceRight = Math.abs(evt.clientX - imgRects.right); if (distanceLeft < distanceRight) { // showLeftArrow = true; // showRightArrow = false; console.log('left'); } else { // showLeftArrow = false; // showRightArrow = true; console.log('right'); } }); /* img.addEventListener('mouseout', () => { showLeftArrow = false; showRightArrow = false; }) */

 <img id="imageTest" src="https://vuejs.org/images/logo.png" style="height:30px;width:30px" />