Question

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

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

我想做的是，当用户根据他们悬停在哪个县上方悬停在图片上时，会发生完全相同的事情（对于右边的内容）。

我查看了一些CSS图像地图，但我没有得到如何在我的情况下使用它...

有人可以通过向我提供一些我应该注意的提示来帮助我吗？如何开始或告诉我，到目前为止我所设置的是不可能的 - 如果我需要/应该采用不同的方法？

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

Answer 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鼠标悬停事件，以实现您的需求。我已经创造了另一个帮助你入门的小提琴 - 对于在这方面走得很远而道歉！

http://jsfiddle.net/jcAe9/

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

1 个答案: