当多个图像映射与jQuery在同一页面上时，如何定位单个图像映射区域 [英] How to target a single image map area when multiple image maps are on the same page with jQuery

问题描述

我在页面上有三个图像映射，并且想要为每个地图选择区域。

I have three image maps on a page, and want to select the area for each map.

地图1 HTML

<img src="map1.jpg" width="100" height="10" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
  <area shape="rect" coords="609,235,834,335" href="test1.htm" class="fancybox" rel="iframe"/>
</map>

地图2 HTML

<img src="map2.jpg" width="100" height="10" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
  <area shape="rect" coords="609,235,834,335" href="test2.htm" class="fancybox" rel="iframe"/>
</map>

地图3 HTML

<img src="map3.jpg" width="100" height="10" border="0" usemap="#Map3" />
<map name="Map3" id="Map3">
  <area shape="rect" coords="609,235,834,335" href="test3.htm" class="fancybox" rel="iframe"/>
</map>

我尝试过这些选择器：

$('#Map1 > area.fancybox') // function 
$('map > #Map1 > area.fancybox') // function 

推荐答案

您的第一个选择器对于定位特定地图是准确的：

Your first selector is accurate for targeting a specific map:

• 小提琴

• Fiddle

如果您想选择任何区域，您只需使用：

If you want to select any area you could simply use:

$('area');

这篇关于当多个图像映射与jQuery在同一页面上时，如何定位单个图像映射区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！