我如何可以使用图像地图，以显示/隐藏特定的div？ [英] How can I use an image map to show/hide a particular div?

问题描述

我有一个形象的地图，并希望能够显示/隐藏在此基础上影像地图项目的div我点击？

I have an image map and would like to be able to show/hide a div based on which item in the image map I click?

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的，到目前为止...

jquery so far...

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

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

我想我想抓住项标签地图，或类似的东西，并用它来了解要显示的格。我不知道如何使这一呼吁但是。另外，我甚至不知道这是最好的办法，以使这个任何建议将是AP preciated。

I'm thinking I'd like to grab the "item" tag out of the map, or something similar, and use that to know which div to show. I'm not sure how to make that call however. Also, I'm not even sure if this is the best way to this so any suggestions would be appreciated.

下面的小提琴！

谢谢！

推荐答案

您必须改变你的影像地图的规格。像这样的：

You have to change your image map specifications. Like this:

<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，你有一个语法错误，你需要在地图结合，是这样的：

And then in your jQuery, you have a syntax error and you need to bind the map, something like this:

编辑：

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

检查这个更新的jsfiddle 的，我已经为您订做。

Check this UPDATED JSFiddle that I've build for you.

这篇关于我如何可以使用图像地图，以显示/隐藏特定的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！