map und onmouseover

[molily]

Mit dem onmouseover hab ich es schon versucht, aber ich bekomme es nicht hin, dass es bei jeder area einen anderen Text anzeigt!

Woran haperts? Wie sieht dein Quellcode aus?

Ich würde es konzeptionell so lösen:

HTML:

<map id="map" ...>  
<area href="#aaa" ...>  
<area href="#bbb" ...>  
...  
</map>  
  
<ul id="erklärungen">  
   <li id="aaa">  
      <h2>Erklärung</h2>  
      <p>Text</p>  
   </li>  
   <li id="bbb">  
      <h2>Weitere Erklärung</h2>  
      <p>Weiterer Text</p>  
   </li>  
   ...  
</ul>

Im HTML die Map definieren und den Areas ein Linkziel geben. Wenn JavaScript deaktiviert ist, kann man darüber zu den Infos springen. Die liegen in einem ul-Element darunter, schön sortiert, schön mir IDs versehen. Die hrefs der Areas zeigen auf diese IDs.

CSS:

.javascript-aktiv #erklärungen li {  
   display:none;  
}  
.javascript-aktiv #erklärungen li.sichtbar {  
   display:block; /* oder list-item, wurscht */  
}

Mit CSS formatierst und positionierst du das ganze, hier nur die wichtigen Regeln zum Ein- und Ausblenden der Inhalte. Wenn JavaScript aktiv ist, bekommt das body-Element eine Klasse. Über die erste Regel werden also bei aktiviertem JavaScript die li-Elemente versteckt. Wenn sie jedoch die Klasse sichtbar haben, sollen sie angezeigt werden.

JavaScript:

window.onload = function () {  
   document.body.[ref:self812;javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className] = "javascript-aktiv";  
  
   var map = document.[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElementById]("map");  
   map.onmouseover = areaMouseover;  
   map.onclick = areaMouseover;  
};  
  
function areaMouseover () {  
   if (!this.hash) return;  
   var id = this.[ref:self812;javascript/objekte/location.htm#hash@title=hash].[ref:self812;javascript/objekte/string.htm#substring@title=substring](1);  
   var el = document.getElementById(id);  
   el.className = "sichtbar";  
  
   if (areaMouseover.aktivesElement) {  
      areaMouseover.aktivesElement.className = "";  
   }  
   areaMouseover.aktivesElement = el;  
}  
function areaClick () {  
   return false;  
}

Das JavaScript fügt sich automatisch nach dem Laden des Dokuments hinzu. Im onload wird erstmal die CSS-Klasse gesetzt, wodurch die li-Elemente verschwinden. Dann werden dem map-Element zwei Event-Handler für click und mouseover gegeben. Diese verarbeiten alle Ereignisse, die von den verschiedenen area-Elementen aufsteigen. Sprich, ein zentraler Event-Handler an einem übergeordneten Element für mehrere Areas.

Im Mouseover-Handler wird die hash-Eigenschaft des angeklickten area-Elementes ausgelesen. (Wenn das angeklickte Element keine solche Eigenschaft hat, wird die Funktion einfach direkt beendet.) Der »Hash« ist ein Teil der URL aus dem href-Attribut, nämlich der Teil »#aaa«. (Man könnte auch einfach this.href nehmen, allerdings wäre da die gesamte Adresse des aktuellen Dokuments auch noch mit drin.) Wenn man das erste Zeichen noch wegnimmt, kommt man schließlich zu »aaa« und kann das zugehörige Element über diese ID ansprechen.

Das zugehörige Element wird schließlich eingeblendet, indem es die Klasse »sichtbar« bekommt. Damit immer nur ein Element eingeblendet sein kann, wird das gerade aktive Element zwischengespeichert in der Objekteigenschaft areaMouseover.aktivesElement. Wenn da bereits ein Element drinsteht (also schon einmal eine Erklärung eingeblendet wurde), wird diesem die Klasse weggenommen.

Der Klick-Handler macht nichts anderes, als die Standardaktion zu unterdrücken. Zweck davon ist, dass der Browser beim Klick auf die Area nicht zusätzlich zum eingeblendeten li-Element springt - weil die ist auch Linkziel. Das ist, je nachdem, wie du die Elemente positionierst, nicht unbedingt schlimm - dann könntest du den Teil weglassen.

Das jetzt nur als ungetestetes(!) Konzept(!)beispiel, wie du die Inhalte sauber strukturiert im HTML notieren kannst und sie auch ohne JavaScript zugänglich sind. Schau es dir mal an, versuche die grundlegende Funktionsweise zu verstehen und prüfe, ob das Konzept auf deine Anwendung passt. Falls ja, versuche es anzupassen, dabei kann ich dir gerne nochmal helfen.

Mathias