bildernavigation mit javascript
ich hab mich gerade mal ein bisschen mit javascript beschäftigt und mir ein kleines script für meine seite gebaut, womit man zwischen bildern hin- und hernavigieren kann.
dachte mir, daß das hier vielleicht auch ein paar leute interessieren könnte - updates gestalten sich so nämlich wesentlich einfacher und übersichtlicher, als wenn man für jedes neue bild gleich ne neue html-seite bauen muss.
es gibt wahrscheinlich noch andere (bessere?) möglichkeiten, diese funktion zu erreichen, ich bin schließlich blutiger anfänger und hab eigentlich keine ahnung wovon ich rede - aber es funktioniert, was will man mehr?
hier erstmal meine seite:
so siehts aus
und hier der quelltext (den gesamten quelltext könnt ihr auf der seite sehen - rechtsklick - quelltext anzeigen):
<script language="JavaScript">
<!--
var lautgedacht = new Array();
lautgedacht[0] = "lautgedacht/lautgedacht01.gif"
lautgedacht[1] = "lautgedacht/lautgedacht02.gif"
lautgedacht[2] = "lautgedacht/lautgedacht03.gif"
var nummer;
function neues() {
document.strip.src=lautgedacht[lautgedacht.length-1];
nummer=lautgedacht.length-1;
}
function erstes() {
document.strip.src=lautgedacht[0];
nummer=0;
}
function vor() {
if (nummer < lautgedacht.length - 1) {
nummer++
document.strip.src=lautgedacht[nummer];
}
}
function zurueck() {
if (nummer > 0) {
nummer--
document.strip.src=lautgedacht[nummer];
}
}
//-->
</script>
dieser text steht im
<head> der html-datei.
und jetzt die erklärung schritt für schritt:
zuerst hab ich mit
var lautgedacht = new Array();
ein neues array namens "lautgedacht" definiert, das alle bilder enthält, die ich anzeigen will, nämlich lautgedacht01.gif bis lautgedacht03.gif (wie die dateien heißen ist egal, die müssen auch nicht nummeriert sein) im ordner lautgedacht. (ich weiß, es ist unpraktisch wenn alles gleich heißt, aber das ist mir erst später klargeworden...)
dazu wird jeder bilddatei eine nummer im array zugeordnet. wichtig ist hier, daß die erste nummer immer 0 ist. das schema ist also:
arrayname[aufsteigender wert] = "pfad/dateiname"
als nächstes hab ich mit
var nummer;
eine variable definiert, die "nummer" heißt. die brauch ich bei den vor- und zurück-funktionen.
jetzt kommen die funktionen. die ersten beiden sind einfach:
function neues() {
document.strip.src=lautgedacht[lautgedacht.length-1];
nummer=lautgedacht.length-1;
}
die funktion "neues" fügt im html-dokument in einem tag mit dem namen "strip" als quelle das dritte (vorsicht, es fängt bei 0 an...!) bild des lautgedacht-arrays ein, nämlich lautgedacht03.gif.
danach wird die nummer-variable auf die anzahl der bilder im array gesetzt, in diesem fall 2.
function erstes() {
document.strip.src=lautgedacht[0];
nummer=0;
}
die funktion "erstes" macht dasselbe mit dem ersten bild des arrays und setzt die nummer-variable auf 0.
jetzt wirds langsam etwas komplizierter:
function vor() {
if (nummer < lautgedacht.length - 1) {
nummer++
document.strip.src=lautgedacht[nummer];
}
}
diese funktion prüft zuerst die nummer-variable. wenn sie kleiner ist als die anzahl der bilder im array, also nicht gerade das neueste bild angezeigt wird (sonst würde man mit "vor" auf ein leeres bild kommen), wird "nummer" um eins erhöht.
danach wird im dokument das bild mit dem aktuellen wert der nummer-variable angezeigt.
function zurueck() {
if (nummer > 0) {
nummer--
document.strip.src=lautgedacht[nummer];
}
}
genauso funktioniert auch die funktion "zurueck". wenn "nummer" größer 0 ist, also nicht das erste bild angezeigt wird, wird die variable um eins heruntergesetzt, und dann das bild mit dem array-wert "nummer" angezeigt.
so viel zum script. das muss jetzt nur noch in die html-datei eingebunden werden.
die erste funktion, die aufgerufen wird, ist "neues", nämlich gleich im
<body>-tag und zwar beim laden der seite mit dem "onload"-eventhandler:
<body onload="neues();">
danach kommt der restliche seiteninhalt. irgendwo auf dieser seite steht jetzt das
<img>-tag mit dem namen "strip", auf das sich sämtliche funktionen beziehen:
<img name=strip width=800 height=340 border=2>
das hier ist es. hier wird das entsprechende bild aus dem array angezeigt. manche quellen behaupten, man müsse ein leeres bild als quelle angeben (also src="nichtvorhandenedatei.gif") und unbedingt eine größe definieren. bei mir hat es auch ohne irgendwas funktioniert, ich habs aber noch nicht ausgiebig getestet.
zum schluß brauchen wir noch die buttons, mit denen navigiert werden soll:
<img src="lautgedacht/first.gif" border=0 onclick="erstes();">
<img src="lautgedacht/back.gif" border=0 onclick="zurueck();">
<img src="lautgedacht/next.gif" border=0 onclick="vor();">
<img src="lautgedacht/last.gif" border=0 onclick="neues();">
diese vier dinger sind ganz normale bilder, bei denen jedoch, wenn man sie anklickt (das macht der eventhandler "onclick"), jeweils eine funktion aufgerufen wird, nämlich genau die vier funktionen "erstes", "zurueck", "vor" und "neues". ich hoffe mal es ist klar was die jeweils machen
.
das wars eigentlich auch schon.
wenn ihr das script bei euch einbauen wollt, müsst ihr nur die namen des arrays und die pfade der bilder durch eure eigenen ersetzen (also überall wo "lautgedacht" drin vorkommt *g*).
beim aktualisieren muss man dann nur im array eine neue nummer mit dem nächsten bild hinzufügen (also hier z.b. die zeile
lautgedacht[3]="lautgedacht/lautgedacht04.gif).
ich hoffe mal, das war einigermaßen verständlich...
viel erfolg!
p.s: kann gut sein daß es ein solches oder ähnliches script schon irgendwo gibt und jemand copyright drauf hat - ich hab aber nichts gefunden, das genau diese funktionen hat und hab es (mit hilfe einiger tutorials) tatsächlich selbst geschrieben und nicht geklaut. aber wenn ihr was in die richtung findet könnt ihrs ja gern hier posten.
Donnerstag, 18. April 2024, 15:08 UTC+1
Zitat
<td><img src="lautgedacht/next.gif" onclick="vor();" border="0"></td>
