Как сделать что бы при нажатии на объект карты-изображений, объект фиксировался.

[Gorgeous]

Ребят подскажите пожалуйста, сделал карту изображений и застопорился, как сделать так что бы выбранная область при нажатии оставалась тем цветом которым выделена, а при двойном нажатии пропадала. Пробывал через onClick - не получается, может чтото не так делаю ? вот код.

<map  name="map">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_szao.png'";alt="СЗАО" href="#" coords="21,15,48,17,44,35,37,47,48,61,52,62,65,89,70,91,69,101,77,128,74,129,64,125,62,137,55,140,49,135,58,128,54,119,29,121,30,110,37,89,31,88,25,93,19,78,21,70,32,66,33,74,39,74,43,65,31,58,29,41,31,36,20,30,21,15" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_sao.png'"; alt="САО" href="#" coords="53,58,67,55,83,45,93,54,95,91,99,116,97,120,84,122,79,129,73,119,68,97,70,91,65,89,59,68,53,58" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_svao.png'"; alt="СВАО" href="#" coords="79,25,86,24,85,18,97,17,99,21,93,21,95,27,92,43,101,43,117,51,137,53,147,63,137,72,143,73,142,80,134,79,126,86,126,96,118,111,108,111,107,117,99,111,95,87,93,53,85,46,79,25" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_vao.png'"; alt="ВАО" href="#" coords="147,63,137,72,143,73,142,80,134,79,126,86,126,96,118,111,140,122,141,134,189,168,195,163,213,156,206,148,193,155,187,146,196,138,181,140,181,101,189,105,190,95,182,99,177,90,147,63" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_yvao.png'"; alt="ВАО" href="#" coords="140,123,141,135,186,165,185,179,177,174,179,191,164,209,161,195,138,199,125,191,126,183,139,174,135,168,124,165,122,148,134,145,126,133,140,123" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_yao.png'"; alt="ЮАО" href="#" coords="164,209,161,195,138,199,125,191,126,183,139,174,135,168,124,165,122,148,101,152,97,157,107,175,103,198,96,196,93,232,100,237,130,237,164,209" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_yzao.png'"; alt="ЮЗАО" href="#" coords="97,157,107,175,103,198,96,196,93,232,100,237,93,265,102,278,97,284,91,278,92,268,79,277,80,269,72,263,60,262,60,256,78,247,85,247,85,238,56,199,77,179,74,174,89,158,96,157" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_zao.png'"; alt="ЗАО" href="#" coords="56,199,77,179,74,174,89,158,83,151,94,137,90,133,79,138,66,125,61,138,50,138,59,126,55,119,28,121,31,149,42,173,41,183,25,180,14,194,27,205,42,200,43,186,56,199" shape="poly">
		<area  onmouseout="document.map.src='map.png'"; onmouseover="document.map.src='map_cao.png'"; alt="ЦАО" href="#" coords="73,110,140,158" shape="rect">
	</map>
 <img src="map.png" width="230" height="300" usemap="#Map" name="map" border="0">

[melky]

onclick

ondblclick

это подсказка

[Gorgeous]

Ххммм, я пробовал, не получается.. Т.е. получается только часть, изображение изменяется при нажатии, но когда увожу курсор с выделенного объекта, оно пропадает,
вместо того что бы оставаться.
наверно не до конца чтото прописывал, но что?? Подскажите пожалуйста !

[melky]

чуть-чуть коряво, но быстро

вместо

<div style="background: url(map.png) no-repeat; height: 300px; width: 230px;">

поставить это

<div *!*id="map"*/!* style="background: url(map.png) no-repeat; height: 300px; width: 230px;">

т.е. добавить ему id="map"

и вместо

<img src="map.png" width="230" height="300" usemap="#Map" name="map" border="0">

поставить это

<img width="230" height="300" border="0" src="map.png" usemap="#Map" name="map" id="firstmap">

<img id="secondmap" src="map_zao.png" style="display:none" name="swappermap">

и еще перед </body> (в конце страницы) поставить этот скрипт

var img = document.getElementById("firstmap"), swap = document.getElementById("secondmap");

document.getElementById("map").onclick = function(){
     if( swap.name === "map" ){
         img.name = "map";
         swap.name = "swappermap";
         if( swap.src ) img.src = swap.src;
     } else {
         img.name = "swappermap";
         swap.name = "map";   
     };
};

[Gorgeous]

Просто супер!! очень благодарен!!
А как сделать так что бы несколько областей можно выделять ?