0

I have a picture of Country Norway : https://autopower.no/images/geoLocation/NO-578.png
As you can see - sort of - the image is devided into counties.

When the user hover over the county names on the left side - The image switches between 20 equal images with the corresponding county highlighted along with some information on the right side : https://autopower.no/?Page=Dealers

What I would like to do, is to have the exact same thing happen (to the content on the right) when the user hover over the image itself based on which county they hovering over.

I looked into some CSS image map, but I didn't get how I could use it in my case...

Could someone help me out by giving me some tips to what I should look into? how to get started or tell me if this is not possible with what I have set up so far - if I need/should use a different approach?

I'm familiar with jQuery to some extent.
Was hoping not to use Flash.

4

1 回答 1

0

您可以使用 .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/

编辑：

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

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

于 2013-03-22T09:23:47.747 回答