Question

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

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>

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>

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>

I’ve tried these selectors:

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

Answer 1

Your first selector is accurate for targeting a specific map:

• Fiddle

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

$('area');