jQuery 图片地图链接在 div 中更改 html

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

假设您的 <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();
});

我做了很多假设——如果这些假设有问题，请告诉我。

Answer 2

您可以通过将区域项目与州 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

});

jQuery 图片地图链接在 div 中更改 html

jQuery Image Map links change html in div

jquery

imagemap

show-hide