Search code examples
htmlcssimagemap

HTML Imagemaps regular VS CSS Based


I found that CSS Based HTML Imagemaps allow you get do neat things like set the style of the hot spots based on: hover, click, visited, etc. But you are limited to use squares & rectangles.

However I do not believe that you can do this in the standard html image maps. But the benefit of standard html image maps are that you can polygons, circles.

Is that limitation true?

Sample CSS Based Image Map Code

<div class="imgmap_css_container" id="SeatingChartMap"><a style="position: absolute; `top: 396px; left: 565px; width: 20px; height: 43px;"  alt="A: 1: 1" title="A: 1: 1" href="11" target="" ><em>A: 1: 1</em></a><a style="position: absolute; top: 395px; left: 541px; width: 19px; height: 45px;"  alt="A: 1: 2" title="A: 1: 2" href="12" target="" ><em>A: 1: 2</em></a><a style="position: absolute; top: 392px; left: 516px; width: 21px; height: 47px;"  alt="A: 1: 3" title="A: 1: 3" href="13" target="" ><em>A: 1: 3</em></a><a style="position: absolute; top: 392px; left: 492px; width: 22px; height: 47px;"  alt="A: 1: 4" title="A: 1: 4" href="14" target="" ><em>A: 1: 4</em></a><a style="position: absolute; top: 390px; left: 469px; width: 20px; height: 48px;"  alt="A: 1: 5" title="A: 1: 5" href="15" target="" ><em>A: 1: 5</em></a><a style="position: absolute; top: 387px; left: 442px; width: 24px; height: 48px;"  alt="A: 1: 6" title="A: 1: 6" href="16" target="" ><em>A: 1: 6</em></a></div>`

Sample Standard HTML Image Map Code

<img src="rexall_place-seating-chart1561-791.gif" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
  <area shape="poly" coords="346,93,339,155,355,158,375,92,347,92" href="2"  alt="" title="">
  <area shape="rect" coords="305,95,332,152" href="1"  alt="" title="">
  <area shape="rect" coords="201,92,234,153" href="433"  alt="" title="">
  <area shape="rect" coords="237,92,266,154" href="4343"  alt="" title="">
  <area shape="rect" coords="272,91,300,154" href="32"  alt="" title="">
  <area shape="rect" coords="186,317,226,373" href="221"  alt="" title="">
  <area shape="rect" coords="183,443,212,477" href="11"  alt="" title="">
  <area shape="circle" coords="107,271,42" href="32"  alt="" title="">
  <area shape="poly" coords="361,230,367,241,424,239,410,202,360,229" href="2"  alt="" title="">
  <area shape="poly" coords="30,176,21,209,18,248,20,282,64,280,62,253,72,228,83,199,31,172" href="2"  alt="" title="">
</map>

Solution

  • An alternative to maphilight is Image Mapster: http://www.outsharked.com/imagemapster/ I'm the author of this plugin, in full disclosure. It adds a substantial number of capabilities compared to maphilight (on which it was initially based).