Question

我正在尝试根据图片地图链接显示内容。例如，单击一个州，然后显示该州的html div内容。

<img src="/territories.jpg" usemap="#Map" />

<map name="Map" id="Map">
  <area shape="poly" coords="5,49" href="#links" alt=""/>
  <area shape="poly" coords="4,137" href="#links" alt=""/>
  <area shape="poly" coords="-62,186" href="#links"/> alt=""/>
</map>

<div id="state1">State One Content</div>
<div id="state2">State Two Content</div>
<div id="state3">State Three Content</div>

一个工作示例，但不是图像映射。 http://jsfiddle.net/hKMFb/24/

工作图像地图，但此图片仅显示一个州http://jsfiddle.net/leonardorb/4QaNx/5/

Answer 1

您可以通过匹配与州的ID匹配的区域项来完成此操作。

下面是一个快速示例代码，

<map name="Map" id="Map">
  <area shape="poly" coords="5,49" href="#links" alt="" item="state1" />
  <area shape="poly" coords="4,137" href="#links" alt="" item="state2" />
  <area shape="poly" coords="-62,186" href="#links" alt="" item="state3" />
</map>

<div id="state1">State One Content</div>
<div id="state2">State Two Content</div>
<div id="state3">State Three Content</div>

//javascript
$("map#Map").click(function(ev){
        var target = $(ev.target);
        var item = target.attr('item');
          alert($("#" + item).html());

});

以下是您的工作示例的固定版本：

http://jsfiddle.net/4QaNx/128/

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasmap" id="" />

<map id="usaMap" name="texasmap">
    <area shape="circle" coords="135,150,45" href="#" alt="" item="Rebuplic of Texas" id="texasArea"/>
    <area shape="circle" coords="250,180,35" href="#" alt="" item="Florida Area" id="floridaArea"/>
</map> 

<div id="message"></div>

$("#message").hide();

$("map#usaMap").click(function(ev){
    var target = $(ev.target);
    var targetId = target.attr('id');
    var item = target.attr('item');
      $("#" + targetId).show(); //By using "#" + targetId it chooses whatever ID is clicked on
      $("#message").html("You clicked the " + item).show(); //by changing the item value to what you want to display it will show it on click, and it replaces the html

});

Answer 2

假设您的<div>是名称state1到stateN其中N == number of areas in map，并假设区域的列表顺序与您的州级索引相同：获取索引点击<area>，然后获取相应的状态<div>并显示：

$("#Map area").on("click", function(e) {
  e.preventDefault();
  var index = $("#Map area").index(this);
  $("#state" + index + 1).show();
});

我做了很多假设 - 让我知道这些是否存在问题。

jQuery Image Map链接更改div中的html

2 个答案: