 Image-Maps 03-A (Dialogbox einblenden)
Beim Klick auf einen verweissensitiven Bereich soll eine alert-Meldung mit einer kurzen Info angezeigt werden. Die gleiche Aktion könnte natürlich auch mit MouseOver ausgelöst werden.
|
|
Image-Map - Alertbox einblenden
Aufbauend auf meine Erklärungsseite  Image-Map 01 habe ich dieses praxisbezogene Beispiel entwickelt. Man möchte nicht immer eine Datei öffnen. Manchmal reicht auch eine kurze Meldung. Hier erst einmal die simpelste Version mit einer JavaScript Dialogbox.
Für die beiden Erwachsenen auf dem Foto werden in meiner Demo Infos in einem Alertfenster angezeigt. Einmal bei MOuseOver und einmal beim Anklicken.
a) die Grafik
<img usemap="#Klassenfoto" src="klassenfoto.jpg" alt="Foto" width="540" ... >
b) der Basis-Code für die Map
<map name="Klassenfoto">
<area href="#" alt="Schmitz" shape="circle" coords="131,101,20"></area>
<area href="#" alt="Meier" shape="circle" coords="420,92,20"></area>
</map>
Auch wenn eine Datei nicht aufgerufen werden soll muss das 'href' notiert sein, damit die Map funktioniert. An Stelle des Dateinamens wird dann normalerweise ein '#' eingetragen. Weil das beim Klicken in machen Browsern zu Sprüngen innerhalb der Seite führen kann, setze ich stattdessen 'javascript:void(0)' ein.
Einfügen der Aktionen
Ich möchte nun eine Alertbox anzeigen lassen die entweder gleich bei MouseOver oder beim Anklicken erscheint. Dazu setze ich die Eventhandler 'onMouseOver' und 'onClick' ein.
Die Syntax für eine AlertBox ist
alert('Text der in der Box angezeigt wird')"
Für mein Beispiel habe ich folgenden Code verwendet:
onMouseover="alert('Lehrer Schmitz')"
onClick="alert('Rektor Meier')"
Der Code für den EventHandler wird nun einfach zusätzlich in den Basiscode meiner Map eingetragen:
<map name="Klassenfoto">
<area onMouseover="alert('Lehrer Schmitz')" href="#" alt="Schmitz" shape ... ></area>
<area onClick="alert('Rektor Meier')" href="#" alt="Meier" shape ... ></area>
</map>
Der hier blau dargestellte Text kann natürlich auch aus einem längeren Text bestehen. Einfache Formatierungsmöglichkeiten für die AlertBox stehen nicht zur Verfügung. Allerdings kann man Steuerzeichen z.B. für Zeilenumbrüche eintragen.
Demo anzeigen
Steuerzeichen ein Anführungszeichen: \"
Steuerzeichen ein Backslash: \\
Steuerzeichen einen Zeilenumbruch: \n
Steuerzeichen einen Tabulator: \t
Aufruf einer Funktion zur Anzeige der AlertBox
Bei längeren, immer gleichen Texten können Sie lange Einträge in der Map umgehen wenn Sie den in der AlertBox anzuzeigenden Text von einer JavaScvript-Funktion 'zusammensetzen' lassen. Die Funktion 'Meldung' in meinem Beispiel schreibt den Text
"Das ist x aus der Jahrgangsklasse 1925"
wobei ich das, was für x stehen soll der Funktion als Parameter übergebe.
onMouseover="Meldung('Lehrer Schmitz')"
onClick="Meldung('Rektor Meier')"
Das ist Lehrer Schmitz aus der Jahrgangsklasse 1925
Das ist Rektor Meier aus der Jahrgangsklasse 1925
Statt des Codes für die Anzeige der AlertBox wird nun der Code für den Aufruf der Funktion 'Meldung()' in den Basiscode meiner Map eingetragen:
<map name="Klassenfoto">
<area onMouseover="Meldung('Lehrer Schmitz')" href="#" alt="Schmitz" ... ></area>
<area onClick="Meldung('Rektor Meier')" href="#" alt="Meier" ... ></area>
</map>
Der JavaScript-Code für die Funktion 'Meldung()' im Head der HTML-Datei:
<script type="text/javascript" language="JavaScript">
<!--
function Meldung(x) {
var Meldungstext = "Das ist " + x + " aus der Jahrgangsklasse 1925"
alert(Meldungstext)
return
}
//-->
</script>
Beide Varianten können Sie oben als Demo öffnen und sind in der Zip-Datei (Download) enthalten. Das Foto stammt aus Wikipedia und wurde von Johannes Böckh zur >Verfügung gestellt.
| 
Home • Verweise • Image-Maps 03-A
Bsp 01
DOWNLOAD
