layout/html/tests/ImageMap.html
author jst@mozilla.com
Mon, 07 Apr 2008 17:22:19 -0700
changeset 14014 03c24d4df2587117194948736311a6f842d00291
parent 1 9b2a99adc05e53cd4010de512f50118594756650
permissions -rw-r--r--
Adding files extensions/confvars.sh extensions/build.mk to cvs-trunk-mirror.

<HTML>
<head>
<SCRIPT>
function isEmpty(s)
{
  if (null == s) return true;
  if (s.length == 0) return true;
  return false;
}

function dumpMap(map)
{
  dump("<map name=\"" + map.name + "\">\n");
  var areas = map.areas;
  var i;
  for (i = 0; i < areas.length; i++) {
    var area = areas[i];
    var coords = area.coords;
    var shape = area.shape;
    var href = area.href;
    dump("  <area");
    if (!isEmpty(coords)) {
      dump(" coords=\"" + coords + "\"");
    }
    if (!isEmpty(shape)) {
      dump(" shape=\"" + shape + "\"");
    }
    if (!isEmpty(href)) {
      dump(" href=\"" + href + "\"");
    }
    dump(">\n");
  }
  dump("</map>\n");
}

function showMap()
{
  var map = document.getElementById("mainmap");
  dump("Map, before we edit it:\n");
  dumpMap(map);
  return false;
}

function removeArea()
{
  var map = document.getElementById("mainmap");
  map.removeChild(map.areas[0]);
  dump("Map, after we editted it:\n");
  dumpMap(map);
  return true;
}

function addArea()
{
  // remove the first area and then add in a new area
  var map = document.getElementById("mainmap");
  var newArea = document.createElement("area", newArea);
  newArea.setAttribute("COORDS", "385,1,467,24");
  newArea.setAttribute("HREF", "../edemo/democ/index.html");
  map.appendChild(newArea);

  dump("Map, after we editted it:\n");
  dumpMap(map);
  return true;
}
</SCRIPT>
</head>
<BODY>
<IMG SRC="new_nav_home.gif" WIDTH=468 HEIGHT=25 BORDER=50 USEMAP="#mainmap" ALT="Navigation Bar" ISMAP><br>
<A HREF="woofer.gif">
<IMG SRC="new_nav_home.gif" WIDTH=468 HEIGHT=25 BORDER=50 ALT="Navigation Bar" ISMAP></A>
<MAP NAME="mainmap" ID=mainmap>
What should a mother do she wonders?
<AREA COORDS="0,2,75,24" HREF="../edemo/demo1/index.html" ALT="Demo 1">
<AREA COORDS="79,2,156,24" HREF="../edemo/demo2/index.html" ALT="Demo 2">
<AREA COORDS="158,1,232,24" HREF="../edemo/demo5/index.html" ALT="Demo 5">
<AREA COORDS="234,1,312,24" HREF="../edemo/demo9/index.html" ALT="Demo 9">
<AREA COORDS="315,2,382,24" HREF="../edemo/demoa/index.html" ALT="Demo a">
</MAP>
<HR>
<form>
<input type=button onclick="return showMap();" value="Show Map">
<input type=button onclick="return removeArea();" value="Remove Area">
<input type=button onclick="return addArea();" value="Append Area">
</form>
</BODY>
</html>