如何根据鼠标在图像上的位置更改内容？答案

【问题标题】：how do i change content based on position of mouse over an image?如何根据鼠标在图像上的位置更改内容？
【发布时间】：2013-03-22 09:20:29
【问题描述】：

我有一张挪威国家的照片：https://autopower.no/images/geoLocation/NO-578.png
正如你所看到的 - 有点 - 图像被划分为县。

当用户将鼠标悬停在左侧的县名上时 - 图像在 20 个相等的图像之间切换，相应的县突出显示以及右侧的一些信息：https://autopower.no/?Page=Dealers

我想做的是，当用户将鼠标悬停在图像本身上时，会发生完全相同的事情（右侧的内容），具体取决于他们悬停在哪个县。

我查看了一些 CSS 图像映射，但我不知道如何在我的情况下使用它...

有人可以通过给我一些关于我应该研究什么的提示来帮助我吗？如何开始或告诉我到目前为止我设置的内容是否不可能 - 如果我需要/应该使用不同的方法？

我对 jQuery 有一定的了解。
希望不要用 Flash。

【问题讨论】：

标签： image maps hover

【解决方案1】：

您可以使用 .mouseover() 和 mouseout() jQuery 方法来完成此操作，例如：

$(".county").mouseover(function() {
    var elementId = "#text-" + $(this).attr("id").split("-")[1];
    $(elementId).removeClass("hidden");
});

$(".county").mouseout(function() {
    var elementId = "#text-" + $(this).attr("id").split("-")[1];
    $(elementId).addClass("hidden");
});

我已经构建了一个简单的小提琴来演示它的用法：http://jsfiddle.net/X2u2y/

jQuery API 网站上提供了完整的文档：http://api.jquery.com/mouseover/

编辑：

我可以看到您在这里想要的是使用具有可悬停 区域（图像地图）的单个图形。为了做到这一点，不幸的是，您必须计算出每个 hoverable 区域的坐标，并组成一个由区域组成的地图元素，格式如下：

<map name="parts">  
  <area shape="rect" coords="20,6,200,60" text-ref="county1">  
  <area shape="rect" coords="100,200,50" text-ref="county2">  
</map>

然后您应该能够将这些区域中的每一个链接到不同的 jQuery mouseover 事件以完成您需要的操作。我已经创建了另一个小提琴来让你开始 - 很抱歉在这方面走了很长的路！

http://jsfiddle.net/jcAe9/

【讨论】：

要么我误解了你的答案，要么你误解了我的问题。反正;我需要完成的是知道鼠标光标在图片上的位置。并且根据光标所在的位置，我可以在右侧向用户呈现正确的信息。当用户将鼠标悬停在左侧的县列表上时，我也会这样做。还要更改地图，以便突出显示用户悬停在的县...
我已经编辑了我的答案，包括一个我认为你想要的东西的工作示例 - 希望这会有所帮助！