RetroZilla/layout/html/tests/ImageMap.html
2015-10-20 23:03:22 -04:00

88 lines
2.3 KiB
HTML

<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>