JavaScript中的坐标与鼠标悬停时的图像

Coordinates in JavaScript vs Image on Mouse Hover

本文关键字：悬停 鼠标 图像 坐标 JavaScript      更新时间：2023-09-26

我在个人网站上遇到了麻烦。我在这个网站上有4张图片。

目标是在光标打开时扩展其中一个图像。

我想知道这种情况下的编码标准。我应该有一个包含所有图像的背景图像，并根据鼠标的位置显示event.clientX和event.clientY吗？或者最好的方法是将4个图像放在带有img的html文件上，然后添加onmouseover？

请给我一个更好的想法来实现这个功能

由于您有4个不同的图像，我将使用onmouseover。所以你不需要计算任何坐标。只有当形状不规则时，才需要使用坐标/图像贴图。

这个演示演示了如何将事件处理程序附加到图像并设置边界

这个javascript

  function setStyle(that, setBorder) {    
    if(setBorder == 1){
        that.style.border = '4em solid red';        
        console.log(that.style.border);
    }
    else
        that.style.border = '4em solid green';
    return true;
  }

这个html

  <img src="http://plnkr.co/img/plunker.png" width="30px" 
        onmouseover="setStyle(this, 1);" 
        onmouseout="setStyle(this, 0);" /></a>
相关文章：