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

我有一张挪威的照片：
正如你所看到的——有点像——这张图片被分成了几个县

当用户将鼠标悬停在左侧的县名称上时，图像将在20个相等的图像之间切换，并在右侧高亮显示相应的县以及一些信息：

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

我查看了一些CSS图像映射，但我不知道如何在我的案例中使用它

有谁能帮我一下，给我一些我应该研究的建议吗？如何开始或告诉我，如果我到目前为止设置的内容不可能做到这一点-如果我需要/应该使用不同的方法

我在某种程度上熟悉jQuery。

---

希望不要使用Flash。

您可以使用.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");
});

我制作了一个简单的小提琴，演示如何使用：

这方面的完整文档可在jQuery API网站上获得：

编辑：

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

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

要么我误解了你的答案，要么你误解了我的问题。无论如何我需要完成的是知道鼠标光标在图片上的位置。根据光标的位置，我可以在右侧向用户提供正确的信息。与用户将鼠标悬停在左侧的县列表上时的操作相同。同时更改地图，以便突出显示用户悬停的县…我已经编辑了我的答案，以包含一个我认为您需要的工作示例-希望这会有所帮助！