Swapping Image Maps
http://www.htmlgoodies.com/tutors/imagemapmouse.html
My problem is that I actually need to swap out the entire map (not
just the picture) with a new map. Here is the code I setup, but it
does not work. The pictures will switch, but I can never get it to
read the new map coordinates. Does anyone know why, or have any other
suggestions for me to try?
Brandon
<HTML>
<HEAD>
<TITLE>Map Test</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
// Preload images
main01 = new Image(350,350)
main01.src = "../images/maps/main01.gif"
main02 = new Image(350,350)
main02.src = "../images/maps/main02.gif"
function switch_bldg() {
//alert(document.building.src)
if ( document.building.src == main01.src )
{
document.building.src = main02.src;
change_map();
return true;
}
if ( document.building.src == main02.src )
{
document.building.src = main01.src;
change_map();
return true;
}
}
function test() {
alert("Test")
}
function change_map() {
if ( document.building.src == main01.src )
{
MapToUse.innerHTML = "";
MapToUse.insertAdjacentHTML("BeforeEnd", "<MAP NAME=\"bldg1b\"> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "<AREA SHAPE=\"rect\"
ALT=\"Area 3\" COORDS=\"75,75,220,220\" HREF=\"main01.gif\"
onMouseOver=\"test()\"> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "<AREA SHAPE=\"default\"
nohref> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "</MAP> ")
}
if ( document.building.src == main02.src )
{
MapToUse.innerHTML = "";
MapToUse.insertAdjacentHTML("BeforeEnd", "<MAP NAME=\"bldg1a\"> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "<AREA SHAPE=\"rect\"
ALT=\"Area 1\" COORDS=\"5,5,140,140\" HREF=\"main01.gif\"
onMouseOver=\"switch_bldg()\"> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "<AREA SHAPE=\"rect\"
ALT=\"Area 2\" COORDS=\"180,5,340,140\" HREF=\"main02.gif\"
onMouseOver=\"switch_bldg()\"> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "<AREA SHAPE=\"default\"
nohref> ")
MapToUse.insertAdjacentHTML("BeforeEnd", "</MAP> ")
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME="building" SRC="../images/maps/main01.gif" USEMAP="#bldg1a"
BORDER="0">
<DIV ID="MapToUse">
<MAP NAME="bldg1a">
<AREA SHAPE="rect" ALT="Area 1" COORDS="5,5,140,140" HREF="main01.gif"
onMouseOver="switch_bldg()">
<AREA SHAPE="rect" ALT="Area 2" COORDS="180,5,340,140"
HREF="main02.gif" onMouseOver="switch_bldg()">
<AREA SHAPE="default" nohref>
</MAP>
</DIV>
</BODY>
</HTML>
[3000 byte] By [Brandon Ray] at [2007-11-9 16:16:47] 