Javascript-форум - Подмена картинки при клике

Добрый день. В JS плохо разбираюсь. Помогите решить слудующую задачу.

Есть карта изображений. При наведении мыши на различные части изображения они подсвечиваются (меняется картинка). Как сделать чтобы эта подсветка сохранялась при клике и после этого при наведении на остальные части изображения не менялась. Также после повторного клика на эту часть изображения нужно вернуть исходную картинку.

Сейчас код такой.

<img class="symptomsmap_s1" name="symptomsmap_s1" src="images/symptoms-map_s1.png" id="symptomsmap_s1" usemap="#m_symptomsmap_s1" alt="" />
<map name="m_symptomsmap_s1" id="m_symptomsmap_s1">
<area shape="poly" coords="268,245,276,251,292,251,301,247,301,255,297,278,297,303,292,315,294,325,291,337,294,370,292,377,285,408,283,423,285,434,284,463,261,464,260,448,269,435,269,423,271,415,265,386,264,364,269,339,271,320,266,274,268,245" href="javascript:;" alt="" onmouseout="MM_swapImage('symptomsmap_s1','','images/symptoms-map_s1.png',1);"  onmouseover="MM_swapImage('symptomsmap_s1','','images/symptoms-map_s10.png',1);" id="feet1" />
<!-- ДРУГИЕ ЧАСТИ ИЗОБРАЖЕНИЯ -->
</map>

<script type="text/javascript">
document.getElementById('feet1').onclick = function() {
    var text = 'feet';
    document.getElementById('symptoms-search').getElementsByTagName('input')[0].value = text;
  }

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

Если в теге <area> добавляю событие
onclick="MM_swapImage('symptomsmap_s1','','images/symptoms-map_s10.png',1);"
или
onclick="document.getElementById('symptomsmap_s1') .setAttribute('src','images/symptoms-map_s10.png');"
то ни чего не происходит

Подскажите как правильно сделать onclick. Не будет ли он конфиктовать с onmouseout и onmouseover?