JavaScript - Praxistutorial 1 - Inhalte ändern
1. Die Abschnitte
- Überblick
- Vorbereitung
- Die Navigation
- Scrollen
- Inhalte ändern
- Tempo ändern
2. Inhalte ändern
Jetzt wollen wir bei einem Klick auf eines der Vorschaubilder auch die großen Bilder und den dazu gehörigen Text anzeigen. Das geschieht
mit der Funktion showDetails. Erinnert ihr euch noch? Als wir in der scroller.htm die "Linkbilder" per JavaScript
erzeugten (document.write ('<a href="#" onclick="showDetails(' + i + ');">');), haben wir dort schon einen
onclick-Handler darauf gelegt, der besagte Funktion aufruft. Der Parameter war der Name (bzw. die Zahl) des jeweiligen Bildes.
3. Die großen Bilder anzeigen
function showDetails(num)
{
document.images['bild'].src = high[num].src;
}
Erläuterung
Hier könnte man sagen, wenig Code, viel zu erklären. Zunächst mal schaut euch die formular.htm noch einmal an. Da seht ihr,
dass wir dem statisch(!) eingebunden Bild ein name-Attribut verpasst haben (<img ... name="bild" />).
Und über diesen steuern wir es mit document.images['bild'] an.
Austauschen
Um nun anstelle des Standardbildes ein anderes zu zeigen, muss man nur den Pfad ändern. Das geschieht mit der Eigenschaft src,
die wir einfach an den Verweis anhängen, also mit document.images['bild'].src. Und wenn ihr euch erinnert, so haben wir ja
für alle Bild-Objekte den Pfad bereits zu Beginn angegeben.
for (i = 0; i < pic_num; i++)
{
high[i] = new Image();
high[i].src = 'pics/high/' + i + '.jpg';
}
Nun greifen wir einfach über den Parameter der Funktion showDetails auf das entsprechende Bild-Objekt mit
high[num].src zu. Ich hoffe, ihr habt verstanden, was ich zu erklären versucht habe.
4. Die Texte anzeigen
function showDetails(num)
{
...
document.getElementById('description').innerHTML = text[num];
}
Erläuterung
Ist wirklich nichts Weltbewegendes. Mit document.getElementById('description') steuern wir den Absatz mit der entsprechende
ID an (<p id="description">). Und weil dies ein Anfängertutorial ist, tauschen wir den Text mal mit einer
Microsoft-Erfindung namens innerHTML aus. Keine Angst, auch die anderen Browser beherrschen das. Den Text selber holen wir
uns aus dem Array, das ich vorab schon vorgegeben habe und nehmen auch hier einfach den Parameter für den Index (text[num]).
innerText versus innerHTML
Eigentlich sollte in diesem Fall innerText völlig ausreichen, da wir ja nur selbigen austauschen. Das hat auch wunderbar
funktioniert, bis mein Firefox nach der Installation diverser Addons nicht mehr mitspielte. Also musste ich hier innerHTML
nehmen, damit es auch bei dem klappt. Das ist leider das tägliche Brot, wenn man mit browserabhängigen Technologien zu tun hat. Aber
keine Angst, bei der DOM-Manipulation zeige ich euch andere Möglichkeiten.
Auch wenn das wieder zusätzliche Probleme hervorruft.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt