Javascript - BG/BRG/BORG Eisenstadt

Transcription

Javascript - BG/BRG/BORG Eisenstadt
BG/BRG/BORG Eisenstadt
- Seite 1 -
Javascript
Inhalt
1
1.1
1.2
1.3
1.4
1.5
1.6
2
2.1
2.2
2.3
Überblick Javascript ........................................................................................................................................................... 2
Was ist Javascript? ................................................................................................................................................................ 2
1.1.1 Variablen ...................................................................................................................................................................... 2
1.1.2 Arrays ........................................................................................................................................................................... 2
Wodurch wird Javascript-Code ausgelöst?............................................................................................................................ 2
Wohin schreibt man Javascript-Code? .................................................................................................................................. 3
Zugriff auf HTML-Elemente ................................................................................................................................................. 4
Stylesheets in Javascript ........................................................................................................................................................ 5
1.5.1 Übersicht über wichtige Stylesheets in Javascript ........................................................................................................ 6
Zugriff auf Elemente über „Knoten“ („nodes“) .................................................................................................................... 6
Beispiele ................................................................................................................................................................................ 7
Elemente ein-/ausblenden...................................................................................................................................................... 7
2.1.1 Der fertige Quelltext zu "Elemente ein-/ausblenden .................................................................................................... 8
Fenster öffnen........................................................................................................................................................................ 8
MouseOver über ImageMaps ................................................................................................................................................ 8
2.3.1 Der fertige Quellcode zu "Imagemaps": ....................................................................................................................... 9
BG/BRG/BORG Eisenstadt
- Seite 2 -
Javascript
1 Überblick Javascript
1.1 Was ist Javascript?
Javascript ist eine Scriptsprache, die in html-Dokumenten eingebaut und auf dem Client (nicht auf dem Webserver) vom
Browser ausgeführt wird. Sie ist standardisiert und wird deshalb von allen modernen Browsern verstanden. Sie verwendet
weitgehend die C-Syntax, die wir von Java u.a. kennen. Ausnahmen:
1.1.1
Variablen
Variablen werden mit dem Schlüsselwort var deklariert, es ist keine Typangabe nötig (ob Zahl, Text oder boolean wird automatisch erkannt). Variablen können bei der Deklaration auch initialisiert (mit einem Startwert gefüllt) werden. Ein- und dieselbe Variable kann sogar den Typ ändern, wenn man ihr einen entsprechenden neuen Wert zuweist:
var
var
y =
y =
x =
x =
x; // Variable deklarieren. Momentan „undefined“, kann alles aufnehmen (Zahl, Text, …)
y = 100; // Variable deklarieren und initialisieren. Momentan Zahl
'abc'; // jetzt String
"abc"; // doppelte oder einfache Anführungszeichen möglich
10; // ab jetzt ist x nicht mehr „undefined“, sondern eine Integer-Variable
"Hallo"; // und ab jetzt ein String
Man benötigt keine Anweisungen zur Umwandlung von Text und Zahl, das geschieht automatisch:
var x = 10; // Zahl
var s = ' Tage'; // Text
var z = x + s; // Zahl und Text gemischt ergibt: "10 Tage"
1.1.2
Arrays
Arrays funktionieren wie ArrayLists, d.h. sie vergrößern sich automatisch, wenn Elemente hinzugefügt werden. Erzeugt werden sie mit „new Array()“, in Klammern entweder nichts (ein leeres Array) oder die Anzahl der Elemente oder die Werte
selbst (deren Anzahl bestimmt die Anfangsgröße des Arrays):
var zahlen1 = new Array(); // leeres Array erzeugen
var zahlen2 = new Array(2,5,23,19); // Array wird erzeugt und mit 4 Integer-Werten initialisiert
var zahlen3 = new Array(100);
// Array wird für 100 Elemente erzeugt, aber nicht initialisiert (alle Elemente
haben den Wert "undefined")
Hinzufügen eines neuen Elements (ans Ende des Arrays) mit der Methode „push“:
zahlen2.push(217); // Zahl 217 wird ans Ende des Arrays angehängt; das Array wird automatisch (in diesem Beispiel
auf 5 Elemente) vergrößert
Löschen eines oder mehrerer Elemente mit der Methode „splice“:
zahlen2.splice(1,2); // löscht 2 Elemente (= 2.Parameter) ab dem 2. (1.Parameter = Startindex). Array enthält jetzt
nur mehr 3 Elemente
Es ist sogar möglich, einen außerhalb der momentanen Größe liegenden Index für den Zugriff zu verwenden. Das Array wird
automatisch auf die benötigte Größe erweitert:
zahlen2[17] = 9; // ein neues Element mit dem Wert "9" wird an Position 16 eingefügt und das Array automatisch auf
diese Größe erweitert (aufgefüllt mit dem Wert "undefined")
Wie in Java kennen Arrays die Eigenschaft „length“ (= Anzahl der Elemente), die für „for“-Schleifen nützlich sind, um alle Elemente auszulesen bzw. zu beschreiben:
for (var i = 0; i < zahlen2.length; i++)
{
zahlen2[i] = 0; // alle Elemente des Arrays auf 0 setzen: Schleifenzähler i wird als Index verwendet
}
1.2 Wodurch wird Javascript-Code ausgelöst?
a) In den allermeisten Fällen durch Ereignisse („Events“, z.B. Mausklick), auf die in einer „Ereignisbehandlungsroutine“
(„Event-Handler“) reagiert wird. Sie beginnen alle mit „on“, dahinter folgt der Name des Ereignisses (s.Liste unten). Dem
BG/BRG/BORG Eisenstadt
- Seite 3 -
Javascript
Ereignisnamen folgt, in Anführungszeichen und durch Strichpunkt abgeschlossen, entweder der Code (die Anweisungen) oder der Name einer Funktion, die den auszuführenden Code enthält:
onclick="abc();" // Aufruf einer Funktion "abc", in der die gewünschten Javascript-Anweisungen stehen
onmouseover="this.innerHTML='Hallo';" // Javascript-Anweisung direkt im Eventhandler. "innerHTML"
ändert den Text eines html-Tags, "this" greift auf das aktuelle Element zu (= in dem sich die Javascript-Anweisung befindet)
onmouseout=" … ;"
onmousedown=" … ;"
onmouseup=" … ;"
onkeypress=" … ;"
onkeydown=" … ;" // Taste auf der Tastatur wird gedrückt
onkeyup=" … ;" // Taste auf der Tastatur wird losgelassen
onblur=" … ;" // ein Element verliert den Fokus (z.B. Wechsel von einem Textfeld zu einem anderen)
onchange = " … ;" // Inhalt eines Elements hat sich geändert (z.B. Eingabe in ein Textfeld)
onsubmit = " … ;" // auf den "Senden"-Button eines Formulars wurde geklickt
b) Javacriptcode kann auch bereits beim Laden der Seite ausgeführt werden: entweder im Eventhandler von „onload()“
(im <body> - Tag) oder im äußersten Block eines <script> - Bereichs (s.u. 1.3.b, S.5):
<body on load() = " … ;"> // wird beim Laden der Seite ausgeführt
1.3 Wohin schreibt man Javascript-Code?
a) Javascript-Code wird (ähnlich Stylesheets) entweder in eine eigene „Script“-Datei ausgelagert oder
b) in einen Script-Block (<script>...</script>) innerhalb der Seite geschrieben oder
c) direkt hinter dem Tag eingetragen, zu dem das Script gehört
zu a) die externe Script-Datei muss (am besten innerhalb des <head>-Bereichs) im <script> - Tag eingebunden werden
(als Attribut „src“ mit dem Dateinamen der Scriptdatei angeben). Ende-Tag „</script>“ nicht vergessen!:
<html><head><script type="text/javascript" src="standard.js"></script>
zu b) Der Block kann an beliebiger Stelle stehen, aber meist wird er in den <head>-Bereich gesetzt:
<script type="text/javascript">
function abc()
{
...
}
</script>
Globale Variablen (= sind auf der ganzen Seite gültig) und Javascript-Anweisungen, die bereits beim Laden der Seite
ausgeführt werden sollen, sind in diesem äußersten Script-Block, außerhalb der Funktionen, zu deklarieren:
<script type="text/javascript">
var zahlen = 100; // außerhalb der Funktion, im äußersten Block deklarierte Variable = global
function abc()
{
zahlen++; // Zugriff auf globale Variablen in allen Funktionen möglich
}
document.getElementById("bild1").src='NeuesBild.gif'; // Anweisung, die außerhalb der
Funktion, im äußersten Block des <script>-Bereichs
steht, wird beim Laden der Seite ausgeführt
</script>
zu c) die Befehle stehen innerhalb des Tags hinter dem Event-Handler, werden von Anführungszeichen eingerahmt und durch
Strichpunkt abgeschlossen. Wenn der Befehl Textausgaben enthält, müssen daher einfache Anführungszeichen für diese
Texte verwendet werden (im folgenden Beispiel wird "this" verwendet, das soviel bedeutet wie „das aktuelle Element“, also hier der Absatz, in dem sich das Script befindet):
<p onClick="this.innerHTML='Klick geglückt!';">hier klicken</p>
BG/BRG/BORG Eisenstadt
- Seite 4 -
Javascript
1.4 Zugriff auf HTML-Elemente
Für den Zugriff gibt es einen Standard, der von den aktuellen Browsern weitgehend eingehalten wird: DOM („Document Object Model“). Demnach ist der Zugriff auf fast alle HTML-Elemente möglich, wenn:
a) dem HTML-Element eine Nr (Id="...") zugewiesen wurde, z.B.: <img id="bild1" src="...">
b) mit „document.getElementById()“ (Groß-/Kleinschreibung beachten!) dieses Element angesprochen wird. Fast
alle Attribute, die die jeweiligen HTML-Tags kennen, sind nun zugänglich. Sie werden, durch Punkt getrennt, an die
„getElementById“-Anweisung angehängt (kleingeschrieben!). Der <img> - Tag z.B. kennt u.a. das Attribut „src“.
Entsprechend lautet der Javascript-Code, um den Dateinamen des Bildes zu ändern und damit ein anderes Bild anzeigen zu
lassen:
document.getElementById("bild1").src='NeuesBild.gif';
Nur wenige Attribute werden mit anderen Namen angesprochen, z.B. „Padding“ und „Spacing“ in Tabellen:
document.getElementById("tabelle1").cellPadding=10;
document.getElementById("tabelle1").cellSpacing=10;
c) Wenn Javascript-Code direkt in den Eventhandler (innerhalb des Tags) geschrieben wird, ist der Zugriff auf dieses Element mit „this“ möglich. Text kann mit "innerHTML" (Groß-/Kleinschreibung beachten!) eingefügt werden:
<p onclick = " this.innerHTML = 'neuer Text';">
oder: <p onclick = "this.innerHTML = 'neuer Text';">
Außerdem gibt es noch ein paar nützliche Dinge, die in HTML gar nicht, sondern nur in Javascript verfügbar sind:
1) Arrays als "Sammelcontainer" für alle Bilder, Formulare, Links und Frames des Dokuments:
für Bilder: images
für Formulare: forms
für Links: anchors
für Frames: frames
Zugriff mit Index (beginnend bei 0) oder ID, falls vorhanden. Die folgenden Javascript-Beispiele ersetzen das erste Bild
der aktuellen Seite durch ein anderes, indem das Attribut „src“ geändert wird. Beide Versionen machen exakt das Gleiche, im zweiten Fall muss allerdings vorher dem Bild mit <img id='bild1'> die ID ’bild1’ zugewiesen worden
sein:
document.images[0].src='NeuesBild.gif';
document.images[’bild1’].src='NeuesBild.gif';
Alle diese Arrays besitzen die Eigenschaft "length", die die Anzahl der vorhandenen Elemente angibt. Im folgenden Beispiel wird die Anzahl der Links, die sich im aktuellen HTML-Dokument befinden, in die Variable 'AnzLinks' eingetragen:
var AnzLinks=document.anchors.length;
2) Methoden
a) Einige Methoden gehören zum "document"-Objekt, werden also wie "getElementById" mit vorangestelltem
"document" aufgerufen:
document.write() und document.writeln();
Beide geben Text an der aktuellen Stelle aus. writeln erzeugt zusätzlich eine neue Zeile:
document.writeln('Hallo!');
b) Methoden des "Window" – Objekts können mit oder ohne vorangestelltem "window" aufgerufen werden:
alert()
gibt ein Nachrichtenfenster aus. Erwartet in Klammer den auszugebenden
String:
if(x < 0) alert('Wert ist negativ!');
confirm()
BG/BRG/BORG Eisenstadt
- Seite 5 -
Javascript
Wie "alert", aber mit zusätzlichem Button für "Abbrechen". Klick auf "Abbrechen" liefert den Rückgabewert "false", Klick auf Ok liefert "true":
var erg=confirm('Sind alle Angaben korrekt?');
if(erg==false) {
...
}
setTimeout() und setInterval()
Für Animationen notwendig. Beide erwarten in Klammer die Anzahl Millisekunden, die bis zur Ausführung gewartet
werden soll, und den Namen der Funktion, die nach Ablauf der Wartezeit auszuführen ist (im folgenden Beispiel wird
10 Minuten gewartet, bis die Funktion "Stunde" aufgerufen wird. Beachte, dass in diesem Beispiel
"window.setTimeout" nicht innerhalb einer Funktion steht – es benötigt daher keinen Event-Handler, sondern wird
sofort nach Programmstart ausgeführt):
<script type="text/javascript">
function Stunde() {
alert('Sie sind seit 10 Minuten auf meiner Seite');
}
window.setTimeout('Stunde()',600000); // 600.000 ms = 10 Minuten
</script>
Beide können mit clearTimeout() bzw. clearInterval() vorzeitig abgebrochen werden. Diese Methoden erwarten in Klammer eine Variable, die sich auf die von setTimeout() bzw. setInterval() gestartete Funktion
beziehen. Daher muss zuvor der Aufruf in einer Variablen gespeichert worden sein:
var timeoutVariable = window.setTimeout('Stunde()',600000);
clearTimeout(timeoutVariable);
Beispiel für „setInterval()“: in einer Diashow werden im Abstand von 2 Sekunden Bilder gezeigt, bis auf den
Schalter „Abbrechen“ geklickt wird. Die Bilder entnehmen wir einem Array („bilder“), den Index dazu erhöhen wir
in der Funktion „diastart“ vor jedem Durchgang, bzw. setzen ihn auf 0, wenn das Ende des Arrays erreicht ist.
Klick auf den Schalter „Abbrechen“ ruft die Funktion „diastop()“ auf, die mit „clearIntervall“ die Diashow
beendet:
<script type="text/javascript">
var aktBild=0;
var bilder=new Array("harry-potter.gif","hermine.gif","hooch.gif","ron.gif");
var diaVariable=window.setInterval("diastart()",1000);
function diastart() {
if(aktBild < 3) {
aktBild++;
} else {
aktBild=0;
}
document.getElementById("dia").src = bilder[aktBild];
}
function diastop() {
window.clearInterval(diaVariable);
}
</script>
c) Außerdem gibt es noch das "screen"-Objekt, in dem Daten zum Bildschirm gespeichert sind:
availWidth und availHeight enthalten Breite bzw. Höhe des verfügbaren Bildschirmbereichs (d.h. ohne Start-,
Symbol- und Menüleiste, etc.)
var x = screen.availWidth;
var y = screen.availHeight;
1.5 Stylesheets in Javascript
1) Stylesheets können direkt über das Objekt „style“ zugewiesen oder geändert werden. Die Stylesheet-Namen müssen ohne Bindestrich geschrieben werden. Stattdessen ist das zweite Wort mit Großbuchstaben zu beginnen:
BG/BRG/BORG Eisenstadt
- Seite 6 -
Javascript
document.getElementById('absatz1').style.fontSize='15px';
2) Möchte man aber ganze Stylesheet-Klassen zuweisen, verwendet man das Objekt „className“:
document.getElementById('absatz1').className='NameDerKlasse';
1.5.1
Übersicht über wichtige Stylesheets in Javascript
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
borderColor
borderStyle
borderWidth
borderBottomColor
borderBottomStyle
borderBottomWidth
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRightColor
borderRightStyle
borderRightWidth
borderTopColor
borderTopStyle
borderTopWidth
color
fontFamily
fontStyle
fontVariant
fontWeight
height
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
overflow
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
position
right
textAlign
textDecoration
textIndent
top
verticalAlign
visibility
width
zIndex
1.6 Zugriff auf Elemente über „Knoten“ („nodes“)
Gemäß DOM sind alle Elemente einer Webseite in einer Art Baumstruktur verbunden. Eine Tabelle z.B. enthält einen Tabellen-„Körper“, dieser enthält Zeilen (<tr>), diese wiederum Zellen (<td>) und diese schließlich Text (oder sonstigen Inhalt).
Somit sind alle Zeilen „Kinder“ der Tabelle, die Zellen „Kinder“ der Zeile und die Zelleninhalte „Kinder“ der Zelle. Alle Kinder eines Elements sind im Array „childNodes“ gespeichert. Ob es überhaupt Kinder gibt, steht in „hasChild“ (true
oder false). Das erste Kind findet sich in „firstChild“, das letzte in „lastChild“ und das übergeordnete Element in
„parentNode“. Auf der gleichen Ebene (d.h. unter "Geschwistern", z.B. alle Zellen einer Zeile) erfolgt der Zugriff über
„nextSibling“ und „previousSibling“. Der Inhalt der Zelle schließlich ist über „firstChild.nodeValue“ oder
(nur für Text) „firstChild.data“ erreichbar. Derzeit haben allerdings auch aktuelle Browser noch Probleme mit manchen
Befehlen (z.B. funktioniert „nextSibling“ nicht in Firefox).
<tr>
(firstChild)
(parentNode)
(childNodes[1])
(nextSibling)
<td>
<td>
(previousSibling)
(firstChild)
(parentNode)
Inhalt von <td>
Die folgenden Beispiele beziehen sich auf die oben abgebildete Tabelle mit 3 Zeilen und 3 Spalten. Alle Aufrufe werden
von der mittleren Zelle der 2.Zeile aus (id='z5') gesehen, d.h. die Javascript-Funktionen „suchen1“ bis „suchen4“ werden durch onClick-Ereignisse in die mittlere Zelle ausgelöst. Um die langen Zugriffe über
„document.getElementById“ zu vereinfachen, wurde eine „with“- Anweisung eingesetzt (der in Klammer stehende
Text gilt im gesamten Block, der von einer with-Anweisung eingeschlossen wird):
function suchen1() {
with(document.getElementById('z5')) {
firstChild.nodeValue='Das bin ich!'
}
}
BG/BRG/BORG Eisenstadt
- Seite 7 -
Javascript
function suchen2() {
with(document.getElementById('z5')) {
parentNode.previousSibling.childNodes[1].
firstChild.nodeValue='Hallo Nachbar da oben!';
}
}
function suchen3() {
with(document.getElementById('z5')) {
parentNode.nextSibling.lastChild.firstChild.
nodeValue='Hallo Nachbar rechts unten!';
}
}
function suchen4() {
with(document.getElementById('z5')) {
parentNode.parentNode.firstChild.firstChild.firstChild.
nodeValue='Hallo links oben!';
}
}
2 Beispiele
2.1 Elemente ein-/ausblenden
Über die CSS-Eigenschaft „display“ können Elemente sichtbar und unsichtbar gemacht werden. Das funktioniert mit fast
jedem HTML-Element, besonders eignet sich dafür aber der <div> - Tag, der als Container andere Elemente aufnehmen
kann. Im folgenden Beispiel soll unter einem Absatz ein Block mit zusätzlichem Inhalt erscheinen, wenn die Maus darüberbewegt wird.
Der Absatz (<p>) benötigt die Eventhandler, die auf "Maus wurde über das Element bewegt" (onmouseover) und "Maus
verlässt das Element" (onmouseout) reagieren. Das "<div>" benötigt eine "id", damit darauf per "getElementById"
zugegriffen werden kann. Damit zu Beginn der Block nicht sichtbar ist, wird ihm eine Stylesheet-Klasse zu gewiesen, in der
die entsprechende CSS-Eigenschaft ("display") auf den entsprechenden Wert ("none") gesetzt wurde (s.u.).
<p onmouseover="aufklappen();" onmouseout="zuklappen();">Infos: ...</p>
<div id="zusatzInfos" class="hide">
<ul>
<li>Zusatz 1: ...</li>
<li>Zusatz 2 ...</li>
</ul>
</div>
In der Stylesheet-Datei müssen zwei Klassen angelegt werden, die das ein- und ausblenden übernehmen (CSS - Eigenschaft
"display")
.hide
{
display: none; // Element wird unsichtbar
}
.show
{
display: block; // Element wird sichtbar
border-style: solid; // Rand, damit der Block deutlicher zu erkennen ist
border-width: 1px;
}
Die beiden Javascript-Funktionen "aufklappen" und "zuklappen" greifen auf das <div> zu ("getElementByID('zusatzInfos')") und weisen ihm ("style=") die jeweils passende der beiden Stylesheet-Klasse zu ("hide" um zu verbergen, "show" um anzuzeigen):
<script type="text/javascript">
function aufklappen()
{
document.getElementById('zusatzInfos').className='show';
}
BG/BRG/BORG Eisenstadt
- Seite 8 -
Javascript
function zuklappen()
{
document.getElementById('zusatzInfos').className=hide;
}
</script>
2.1.1
Der fertige Quelltext zu "Elemente ein-/ausblenden
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>Ein-/Ausblenden</title>
<link href="ein-ausblenden.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function aufklappen()
{
document.getElementById('zusatzInfos').className='show';
}
function zuklappen()
{
document.getElementById('zusatzInfos').className='hide';
}
</script>
</head><body>
<p onmouseover="aufklappen();" onmouseout="zuklappen();">Zusätzliche Infos:</p>
<div id="zusatzInfos" class="hide">
<ul>
<li>Zusatz 1: ...</li>
<li>Zusatz 2 ...</li>
</ul>
</div>
</body></html>
2.2 Fenster öffnen
Es ist lästig, kann aber zum Glück mit jedem modernen Browser unterbunden werden: das Öffnen neuer Fenster (meist mit
Werbung). Die Methode gehört zum „window“ - Objekt und benötigt eine URL mit der Datei, die in diesem Fenster angezeigt
werden soll. Den Rückgabewert speichert man in einer Variable, um das Fenster ansprechen zu können. Mit der Methode
„focus()“ wird es in den Vordergrund geholt.
function FensterOeffnen (Adresse) {
MeinFenster = window.open(Adresse, "Zweitfenster", "width=300, height=200);
MeinFenster.focus();
}
2.3 MouseOver über ImageMaps
In Imagemaps ("<map>") werden maussensitive Bereiche mit dem Tag "<area>" definiert. Fängt man das mouseover - Ereignis in diesem <area> - Tag ab, können Beschreibungen zum Bildinhalt, über dem sich die Maus befindet, eingeblendet
werden. Im folgenden Beispiel sollen die Namen der Personen, die auf einem Foto abgebildet sind, sichtbar werden. Wir benötigen die Ereignisse "onmouseover" (wenn die Maus den Bereich einer Person betritt) und "onmouseout" (wenn die Maus
von einer Person zur anderen wechselt und über einen leeren Bereich des Fotos wandert).
Die Namen der Personen speichern wir in einem globalen Array (global bedeutet: außerhalb einer Funktion im äußersten Block
des <script> - Bereichs):
<script type="text/javascript">
var Namen = new Array("Petra Müller","Julia Mayer","Andrea Bauer");
Zwei Funktionen übernehmen die Ausgabe des Namens bzw. das Löschen in einen Absatz. Welcher Name aus dem Array geschrieben werden soll (d.h. der Index), muss als Parameter übergeben werden:
BG/BRG/BORG Eisenstadt
- Seite 9 -
Javascript
function getName(i)
{
document.getElementById('ausgabe').firstChild.nodeValue=Namen[i];
}
function noName()
{
document.getElementById('ausgabe').firstChild.nodeValue=' ';
}
</script>
In der Imagemap ergänzen wir im <area>-Tag die Eventhandler:
<img src="foto.jpg" usemap="#klasse8b"/>
<map name="klasse8b">
<area shape="rect" coords="521,145,567,195" onmouseover="getName(0);"
onmouseout="noName();" />
<area shape="rect" coords="593,129,639,189" onmouseover="getName(1);"
onmouseout="noName();" />
<area shape="rect" coords="495,189,551,255" onmouseover="getName(2);"
onmouseout="noName();" />
</map>
Dem Absatz, der die Namen anzeigen soll, geben wir mit dem Attribut "id" eine eindeutige Bezeichnung. Diese Bezeichnung
wird in den oben genannten Funktionen für den Zugriff auf diesen Absatz verwendet:
<p>Schülername (Maus über Bild bewegen):</p>
<p class="ausgabe" id="ausgabe">&nbsp;</p>
2.3.1
Der fertige Quellcode zu "Imagemaps":
<!doctype html><html>
<head><title>Matura 2006</title><meta charset="UTF-8">
<script type="text/javascript">
var Namen = new Array("Petra Müller", "Julia Mayer", "Andrea Bauer");
function getName(i)
{
document.getElementById('ausgabe').firstChild.nodeValue = Namen[i];
}
function noName()
{
document.getElementById('ausgabe').firstChild.nodeValue = '-';
}
</script>
</head>
<body>
<h1>Maturajahrgang 2006, 8bi</h1>
<p>Schülername (Maus über Bild bewegen):</p>
<p id="ausgabe">-</p>
<p><img src="foto.jpg" usemap="#klasse8b"/></p>
<map name="klasse8b">
<area shape="rect" coords="521,145,567,195" onmouseover="getName(0);"
onmouseout="noName();" />
<area shape="rect" coords="593,129,639,189" onmouseover="getName(1);"
onmouseout="noName();" />
<area shape="rect" coords="495,189,551,255" onmouseover="getName(2);"
onmouseout="noName();" />
</map>
</body>
</html>
BG/BRG/BORG Eisenstadt
- Seite 10 -
Javascript