Rollover - Swap Images within Image Map

[invision]

Hello,

Thanks for reading this.
Now I know this can be done with Macromedia Fireworks, but I can't for the life of me, get mine working.

I just want the certain region to darken when I place the mouse over it.

I have an Image Map like so :
<center>
<img src="MapofScotland.jpg" width="185" height="312" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="80,290,109,273,119,272,120,257,122,250,142,254,140,247,154,240,165,247,159,256,161,266,134,291,99,30 8,82,310,73,294" href="vas.php?id=6" alt="Southern Scotland" title="Southern Scotland" onMouseOver="changer('holder','southern_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="135,98,168,59,185,1,182,-1,173,1,157,21,119,88" href="vas.php?id=5" alt="Orkney &amp; Shetland Islands" title="Orkney &amp; Shetland Islands" onMouseOver="changer('holder','orkney_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="116,237,136,239,144,231,162,238,166,244,152,241,140,245,142,253,121,250,115,249,113,244" href="vas.php?id=2" alt="Edinburgh" title="Edinburgh" onMouseOver="changer('holder','edinburgh_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="91,205,106,209,103,215,121,223,119,229,110,230,115,237,112,243,97,242,88,232,81,218" href="vas.php?id=1" alt="Central Scotland" title="Central Scotland" onMouseOver="changer('holder','central_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="113,243,99,242,96,244,100,248,102,260,110,261,115,251" href="vas.php?id=4" alt="Glasgow" title="Glasgow" onMouseOver="changer('holder','glasgow_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="81,240,97,244,102,260,111,261,116,251,121,252,121,270,108,272,73,294,88,263,80,251" href="vas.php?id=7" alt="Strathclyde" title="Strathclyde" onMouseOver="changer('holder','strathclyde_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="117,229,128,229,125,224,128,216,137,210,148,221,130,236,112,231" href="vas.php?id=8" alt="Fife" title="Fife" onMouseOver="changer('holder','fife_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="86,199,88,206,106,207,104,214,119,223,119,228,126,229,125,221,135,209,139,213,154,201,140,187,104,18 9" href="vas.php?id=11" alt="Tayside" title="Tayside" onMouseOver="changer('holder','tayside_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="64,214,72,201,88,200,82,218,97,240,78,239,78,252,68,242,62,271,49,275,30,250,42,230,35,215,41,203" href="vas.php?id=9" alt="Argyll" title="Argyll" onMouseOver="changer('holder','argyll_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="113,152,111,167,122,169,121,178,113,181,112,190,136,187,153,198,170,156,163,147,123,145" href="vas.php?id=10" alt="Grampian" title="Grampian" onMouseOver="changer('holder','grampian_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="132,99,133,114,104,138,113,141,112,167,119,169,119,178,110,178,113,186,84,200,70,203,58,211,41,202,5 6,173,48,139,77,100" href="vas.php?id=3" alt="Highlands" title="Highlands" onMouseOver="changer('holder','highlands_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="48,140,24,160,35,192,54,171" href="vas.php?id=13" alt="Isle of Skye" title="Isle of Skye" onMouseOver="changer('holder','isle_skye_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="68,268,78,267,73,250,66,253" href="vas.php?id=14" alt="Isle of Arran" title="Isle of Arran" onMouseOver="changer('holder','isle_arran_text.gif');" onMouseOut="changer('holder','clear.gif');">
<area shape="poly" coords="17,201,2,201,6,111,46,100,47,135,19,159" href="vas.php?id=12" alt="Outer Hebrides" title="Outer Hebrides" onMouseOver="changer('holder','hebrides_text.gif');" onMouseOut="changer('holder','clear.gif');">
</map>
</center>


I would like it to work like this : http://www.nadis.org.uk/index.html

Any advice would be greatly appreciated.

[coothead]

Hi there invision,

you need to make a separate MapofScotland.jpg for each highlighted region.
Here is an example...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>six in one</title>
<base href="http://coothead.homestead.com/files/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
div {
text-align:center;
margin-top:50px;
}
#pic {
border:3px double #000;
}
-->
</style>

<script type="text/javascript">
<!--
var maps=new Array();
maps[0]='apple0.jpg';
maps[1]='apple1.jpg';
maps[2]='apple2.jpg';
maps[3]='apple3.jpg';
maps[4]='apple4.jpg';
maps[5]='apple5.jpg';

onload=function() {
var elem=document.getElementsByTagName('area');
for(c=0;c<elem.length;c++) {
elem[c].onmouseover=function() {
document.getElementById('pic').src=maps[this.id.split('-')[1]];
}
}
}

//-->
</script>

</head>
<body><div id="foo"></div>

<div>
<img id="pic" src="apple2.jpg" alt="" usemap="#apples">
</div>

<div>
<map id="apples" name="apples">
<area id="a-0" coords="0,0,116,146" href="http://www.google.com" alt="">
<area id="a-1" coords="124,0,236,146" href="http://www.w3schools.com" alt="">
<area id="a-2" coords="244,0,360,146" href="http://www.htmlforums.com" alt="">
<area id="a-3" coords="0,154,116,280" href="http://www.htmlforums.com" alt="">
<area id="a-4" coords="124,154,236,280" href="http://www.google.com" alt="">
<area id="a-5" coords="244,154,360,280" href="http://www.w3schools.com" alt="">
</map>
</div>

</body>
</html>
coothead

[invision]

Many thanks for the Swift reply.

I shall try this as soon as I get home and post IF(;)) it works.

Thanks again!