我有一个图像映射,并且希望能够根据我单击的图像映射中的哪个项目来显示/隐藏 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。但我不确定如何拨打该电话。另外,我什至不确定这是否是最好的方法,因此任何建议将不胜感激。
Here's a fiddle!
谢谢!!!
其他人也发表了类似的答案。我不知道为什么它被删除了。它似乎有效:
$('[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/
Edit:
为了让事情变得更有活力,你可以从<area>
您将鼠标悬停在其上并使用该值来显示适当的<div>
:
$('[item]').click(function(){
var item=$(this).attr('item');
$(".display").hide();
$("#"+item).show();
return false;
});
http://jsfiddle.net/xtKXL/6/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)