Image Swap + Click Image Swap & Restore Help

Question

Hi everyone,
I'm having trouble figuring this out and was hoping someone could help me with the code. What I currently have is a world map for my books. What I want is to have several hotspots that change the image (the world map) in five ways.
1. When the mouse goes over a continent it swaps the image of the continent with a rollover, letting you know that continent is clickable.
2. When the mouse goes out of the continent it restores back to the original image of the world map.
3. When you click the continent it swaps to a "zoomed in" image of the continent.
4. The image in #3 (zoomed-in) stays on screen until clicked. Once clicked it then returns to the original image (the world map).
5. When the continent is double-clicked it sends you to a separate browser with that continent.
I've got all of them figure out except for #4. As soon as the mouse moves out of the hotspot, the "zoomed-in" image returns to the original image.
Here is the link to what I have so far: http://christopherdeldridge.com/Photo%20World%20Map.html
Here is the code I have for one of the hostpots for one of the continets:
<area shape="poly" coords="335,145,310,134,280,137,255,141,231,144,196,147,170,143,132,146,127,174,144,188,1 64,211,188,211,208,213,231,216,265,217,272,234,295,240,316,227,343,225,357,241,368,226,364 ,203,347,195,315,196,288,198,264,202,246,200,241,171,288,163,315,156" alt="" style="cursor: pointer;" onclick="MM_swapImage('ZenitaSatellite','','Pics/Satellite Map 2/WestVadra 2.gif',1)" ondblclick="MM_openBrWindow('Vadra Photo.html','','')"  onmouseover="MM_swapImage('ZenitaSatellite','','Pics/Satellite Map/WVadra.gif',1)" onmouseout="MM_swapImgRestore()"  />
Thanks for the help...

Answer 1

While looking through your code I see several things you should change:
1.  Your CSS is flawed -
<style type="text/css" media="all">
<!--
.hiddenlink {
color: #000; /* same color as the surrounding text */
text-decoration: none; /* to remove the underline */
cursor: auto; /* to make the cursor stay as the auto cursor, not the hand */
-->
<style type="text/css">td img {display: block;}
.auto-style1 {
Note that the .hiddenlink rule does not have a closing "}", and that there is an improper opening <style> tag embedded there immediately before the 'td img' rule.
2.  I also note your liberal use of file/pathnames containing spaces - this is a bad practice as some browsers will assume that a space is the end of the file/pathname.
Anyhow, I have not tested this but it should work.  You need to set up a toggle on the onclick event call so that you can know which image to load, like this -
<area shape="poly" coords="622,367,592,366,566,373,542,381,527,391,531,407,556,421,592,424,622,411" alt="" style="cursor: pointer;" onclick="if(alekandria==1){MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map 2/Alakandria 2.gif',1);alekandria=0;} else { MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map 2/Alakandria.gif',1);alekandria=1;" ondblclick="MM_openBrWindow('Alakandria Photo.html','','')"  onmouseover="MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map/Alakandria.gif',1)" onmouseout="MM_swapImgRestore()"  />
So - when you click on the image, the value of the toggle (a variable specific to that particular image) is tested.  If its value is 1, the image has already been expanded, and you need to swap in the unexpanded image.  You also set the value of the toggle to 0.  If its value is 0, the image is unexpanded, and you need to swap in the expanded image.  You also set the value of the toggle to 1.
Get it?