Javascript & Image Maps

[Drakken]

Hallo allerseits,

zwar habe beruflich mit Java & Co. zu tun - Webentwicklung mit allen seinen Feinheiten kommt bei mir allerdings nur selten für meine Hobby-Blogs zur Anwendung. Nun habe ich mich für ein neues Gimmick bei SelfHTML über Javascript sowie Image Maps schlau gemacht und hänge aktuell an einem kleinen Problem.
Normalerweise setze ich bei Image Maps natürlich mehrere Bereiche auf ein Bild, da ich aber hier neue Bilder zum Überlagern der Karte nehme, sind sie in einzelnen divs organisiert. Hoffe, das ist kein völlig Trugschlussansatz.

Ziel: Eine Karte mit mehreren roten Punkten darauf, die bei mouseover grün werden und natürlich den Titeltext anzeigen
Gegeben: div-Container mit Karten-img, weitere div-Container mit Punkt-img (mittels Koordinaten und z-Achse auf der Karte platziert)

Die javascript-Funktion soll nun beim mouseover das Bild des roten Punktes durch ein Bild des grünen austauschen und bei mouseout das rote Bild wieder anzeigen.

<script type="text/javascript">
      function ReplaceImage(filename, fileid)
      {
	document.getElementById(fileid).src = filename;
      }
    </script>

<div style="left: 553px; position: absolute; top: 702px; z-index: 2;">
<img id="img2" src="mein roter Punkt" usemap="#m2" width="10px" />
 <map name="m2">
  <area coords="5,5,5" href="#" 
   onmouseout="ReplaceImage("mein roter Punkt", "img2")" 
   onmouseover="ReplaceImage("mein grüner Punkt", "img2")" 
   shape="circle" title="Ortsbeschreibung">
  </area>
 </map>
</div>

<div style="left: 540px; position: absolute; top: 950px; z-index: 2;">
<img id="img1" src="mein roter Punkt" usemap="#m1" width="10px" />
 <map name="m1">
  <area coords="5,5,5" href="#" 
   onmouseout="ReplaceImage("mein roter Punkt", "img1")" 
   onmouseover="ReplaceImage("mein grüner Punkt", "img1")" 
   shape="circle" title="Ortsbeschreibung">
  </area>
 </map>
</div>

In meiner ursprünglichen javascript-Funktion hatte ich die ID als absoluten Wert eingetragen, was bei einem einzelnen Punkt auf der Karte einwandfrei funktionierte. Beim Hinzufügen des 2. Punktes fiel mir jedoch auf, dass ich dann natürlich beim mouseover über jedem Punkt nur den einen Punkt mit der passenden ID änderte und setzte somit die ID als Variable ein, die direkt beim Aufrufen der Funktion als Parameter übergeben wird (so wie ich es aus Methoden bei Java kenne) - leider tut sich nun gar nichts mehr und mein Verständnis der Materie greift nicht tief genug, um den Fehler zu finden.

Hoffentlich reicht dies als Beschreibung für etwaige Tipps und ist nicht zu grundlagenbezogen bzgl. der Forenregeln.


Danke im Voraus
Drakken

 

[tombe]

Kannst du es nicht einfach mit Hilfe von CSS lösen:

div {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 5px;
}

div:hover {
    background-color: green;
}

Wenn es noch DIVs gibt die nicht farblich geändert werden sollen, dann nimmst du einfach eine eingene CSS-Klasse dafür.