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

Question

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

当用户将鼠标悬停在县名左侧 - 20个等于图像间切换图像与相应的县，在右侧的一些信息强调沿：https://autopower.no/?Page=Dealers

我想这样做，当用户将鼠标悬停在图像上时，会发生完全相同的事情（对于右侧的内容）。

我看着一些CSS图像地图，但我没有得到我怎么能在我的情况下使用它...

有人能帮助我通过给我一些提示，我应该考虑什么？如何开始或告诉我，这是不可能的，我已经建立了迄今为止 - 如果我需要/应该使用不同的方法？

我在某种程度上熟悉jQuery。
希望不要使用Flash。

Answer 1

您可以使用.mouseover（）和鼠标移出（）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鼠标悬停事件来完成您所需的任务。我已经创建了另一个小提琴，让你开始 - 在这方面走很长的路！

http://jsfiddle.net/jcAe9/