use reactive image to change maps

I’m trying to make a submenu using reactive images. In order to do this, I need the map to change when the cursor passes over a certain element so that the new image displayed onmouseover can have reactive parts. I thought I kinda knew how to do it but since what I tryed doesn’t work, I was wondering if anyone here could help me out. (but I have to keep using image mapping)

Here’s my code

[CODE]<img src=”images/mapitamtam.gif” name=”mapitamtamimg” usemap=”#mapitamtamimg” border=”0″ alt=”MapiTamTam”>
<map name=”mapitamtamimg”>

<area shape=”polygon” coords=”100,138,124,140,144,150,156,165,158,176,157,187,147,200,133,210,114,214,100,214,82,212,68,206,64,205,61,211,59,215,57,208,59,199,54,191,50,184,49,172,55,158,68,147,79,142,91,139″ href=”bio.htm”
onmouseover=”document.images[‘mapitamtamimg’].src=’images/bio.gif’;document.getElementById(‘pop’).stop();document.getElementById(‘pop’).play();alt=’Biographie’;”
onmouseout=”document.images[‘mapitamtamimg’].src=’images/mapitamtam.gif’;”>

<area shape=”polygon” coords=”163,243,193,244,221,253,241,268,248,280,251,293,248,309,242,321,235,327,237,326,240,333,240,340,239,349,236,341,226,335,216,339,201,345,180,348,155,347,136,341,119,333,108,322,101,310,99,292,102,277,117,260,134,251,156,243″
onmouseover=”document.images[‘mapitamtamimg’].src=’images/expo.gif’;document.getElementById(‘pop’).stop();document.getElementById(‘pop’).play();alt=’Expositions’;”
onmouseout=”document.images[‘mapitamtamimg’].src=’images/mapitamtam.gif’;”>

<area shape=”polygon” coords=”342,308,367,311,391,324,399,340,398,355,384,372,366,381,341,383,325,382,309,375,306,373,302,378,298,385,298,374,301,367,293,357,291,343,295,329,313,314,335,308″ href=”ecrits.htm”
onmouseover=”document.images[‘mapitamtamimg’].src=’images/ecrits.gif’;document.getElementById(‘pop’).stop();document.getElementById(‘pop’).play();alt=’Écrits’;usemap=’#expo’;”
onmouseout=”document.images[‘mapitamtamimg’].src=’images/mapitamtam.gif’;”>

<area shape=”polygon” coords=”489,248,516,247,542,250,559,258,577,272,585,286,586,299,584,314,577,323,573,331,576,336,577,342,575,350,572,344,563,338,547,345,527,351,500,351,485,348,465,342,446,327,436,312,434,294,444,271,465,256,484,248″ href=”acheter.htm”
onmouseover=”document.images[‘mapitamtamimg’].src=’images/acheter.gif’;document.getElementById(‘pop’).stop();document.getElementById(‘pop’).play();alt=’Acheter’;”
onmouseout=”document.images[‘mapitamtamimg’].src=’images/mapitamtam.gif’;”>

<area shape=”polygon” coords=”585,138,609,139,630,146,640,154,649,169,649,180,646,189,635,202,618,211,597,213,582,213,570,210,558,204,552,206,548,213,547,204,550,196,543,186,541,173,544,159,561,145,580,139,592,137″ href=”mailto:[email protected]”
onmouseover=”document.images[‘mapitamtamimg’].src=’images/contact.gif’;document.getElementById(‘pop’).stop();document.getElementById(‘pop’).play();alt=’Contact’;”
onmouseout=”document.images[‘mapitamtamimg’].src=’images/mapitamtam.gif’;”>

<area shape=”default” nohref>
</map>
<map name=”expo”>
<area shape=”polygon” coords=”190,173,205,168,223,165,245,168,264,176,275,187,280,198,280,209,274,221,261,232,244,239,223,241,200,237,182,228,173,218,168,204,170,192,180,179,190,173″ href=”expo1″ alt=”expo1″>
<area shape=”polygon” coords=”327,207,348,208,372,217,386,228,391,243,390,254,380,269,362,278,340,283,318,281,303,277,289,268,281,257,278,242,285,229,299,216,317,209,326,207″ href=”expo2″ alt=”expo2″>
<area shape=”polygon” coords=”239,349,379,275,390,264,397,247,393,228,379,214,242,162,220,160,189,166,171,180,102,279,99,291,101,310,114,328,133,339,154,345,177,348,203,345,221,338,227,333,235,340,238,348″ alt=”expo” onmouseout=”document.images[‘mapitamtamimg’].src=’images/mapitamtam.gif’;usemap=’#mapitamtamimg’;”>
<area shape=”default” nohref>
</map>[/CODE]

Am I doing it wrong or is it that it can’t be done?

Also in #HTML _↴