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

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

目标是在光标处于打开状态时稍微扩展其中一个图像

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

---

请为这个功能给我一个更好的建议

，因为我会在MouseOver上使用4种不同的图像。所以你不需要计算任何坐标。只有在形状不规则的情况下，才需要使用坐标/图像贴图

这将并设置边框

这个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>

如果用户将鼠标移到图像上，是否要更改图像的外观？你的问题是什么？你想知道如何将onmouseover事件附加到图像上吗？主要问题是：我应该使用event.clientX&event.clientY还是使用？是的，我们的目标是稍微扩展一下图像的显示范围，在最好的情况下，将背景中的黑白图像更改为前景中的彩色完整图像。要将图像从黑白更改为彩色版本，您可以更改图像源。您可以为每个图像使用两个图像（一个用于bw，一个用于彩色版本）。或者将它们组合成一个映像（更少的http请求）并移动映像（需要更多的代码并且可能很脆弱）。更改图像源是否需要更多指针？@three-fouronesixonethree。我将使用2个图像（黑白，彩色），我想彩色的一个将在一个div中，这将覆盖黑白图像，就像这样，我可以用onmouseout隐藏这个div，它不会改变黑白第一个图像。我正在寻找css属性，它可以使图片“进入前景”，而不是显示或消失。好吧，我现在正试着这么做，但是如果你有一个fiddlejs的例子，我会很乐意接受。