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

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();
}

我想我想从 map 或类似的东西中抓取“项目”标签，并使用它来知道要显示哪个 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/