Question

我有一张图片地图，希望能够根据我点击的图片地图中的哪个项目显示/隐藏div？

HTML ...

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

<map id="texasMap" name="Texas">
    <area shape="circle" coords="135,150,45" href="#" alt="" item="texas"/>
</map> 

<div id="texas">You clicked the Republic of Texas!</div>

到目前为止jquery ......

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

$("???").click(function(){
    $("#texas").show();
}

我想我想从地图中抓取“item”标签，或类似的东西，并用它来知道要显示的div。但是，我不确定如何拨打电话。此外，我甚至不确定这是否是最佳方式，因此任何建议都将受到赞赏。

这是a fiddle！

感谢!!!

Answer 1

其他人发布了类似的答案。我不确定为什么它被删除了。它似乎有效：

$('[item="texas"]')

以下是一个例子：

<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="texasMap" name="texasmap">
    <area shape="circle" coords="135,150,45" href="#" alt="" item="texas" />
    <area shape="circle" coords="245,170,30" href="#" alt="" item="florida" />
</map> 

<div id="texas" class="display">You clicked the Republic of Texas!</div>
<div id="florida" class="display">You clicked Florida!</div>

$('[item="texas"]').click(function(){
    $(".display").hide();
    $("#texas").show();
    return false;
});
$('[item="florida"]').click(function(){
    $(".display").hide();
    $("#florida").show();
    return false;
});

http://jsfiddle.net/xtKXL/5/

编辑：

为了让事情变得更有活力，您可以抓住正在悬停的<area>上的“项目”，并使用该值显示相应的<div>：

$('[item]').click(function(){
    var item=$(this).attr('item');
    $(".display").hide();
    $("#"+item).show();
    return false;
});

http://jsfiddle.net/xtKXL/6/

Answer 2

您必须更改图像映射规范。像这样：

<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="texasMap" name="texasmap">
  <area shape="circle" coords="135,150,45" href="#" alt="" item="texas" id="texasArea"/>
</map>

然后在你的jQuery中，你有一个语法错误，你需要绑定地图，如下所示：

修改

$("map#usaMap").click(function(ev){ var target = $(ev.target); var targetId = target.attr('id'); if(targetId == 'texasArea') { $("#texas").show(); } });

Check this UPDATED JSFiddle我为你建造的。

如何使用图像映射来显示/隐藏特定的div？

2 个答案:

编辑：