Sonntag, 16. Juni 2019, 6:42 UTC+1

Du bist nicht angemeldet.

kleines grünes

leeres Blatt

  • »kleines grünes« ist der Autor dieses Themas

Beiträge: 1 382

Wohnort: stuttgart

Beruf: mediengestalter (bild/ton)

Danksagungen: 595

  • Private Nachricht senden

1

Freitag, 4. Mai 2007, 19:57

javascript-bildernavigation für websites

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? :D

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.
aldi kaffee SOLL anders schmecken als die original wagner steinofenpizza!

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »kleines grünes« (7. Mai 2007, 22:00)


Chos3n D

Chefradierer

Beiträge: 1 189

Wohnort: Frankfurt a.M.

  • Private Nachricht senden

2

Freitag, 4. Mai 2007, 20:35

klasse tutorial! sowas wollte ich auch schon machen - habs aber nciht hingekriegt. vielen dank ;)
werde es glecih probiern

mulk

Chefradierer

Beiträge: 1 648

Wohnort: Salzburg

Beruf: Produktionsassistent für Film und Video

Danksagungen: 52

  • Private Nachricht senden

3

Freitag, 4. Mai 2007, 20:41

Echt klasse :D Sowas wollte ich eigentlich auch immer schon auf meiner Seite haben, war aber immer zu faul mir alles rauszusuchen.

Mit Flash soll sowas angeblich sogar noch einfacher gehn, frag mich aber nicht wie das genau funktioniert:D

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »mulk« (4. Mai 2007, 20:41)


Hillerkiller

Hillerious

Beiträge: 4 811

Wohnort: Leipzig

Danksagungen: 1174

  • Private Nachricht senden

4

Samstag, 5. Mai 2007, 01:37

Wow, da hast du dich ja richtig reingehängt!
Danke für die Mühe, dem ein oder anderem wird das mit Sicherheit helfen.

kleines grünes

leeres Blatt

  • »kleines grünes« ist der Autor dieses Themas

Beiträge: 1 382

Wohnort: stuttgart

Beruf: mediengestalter (bild/ton)

Danksagungen: 595

  • Private Nachricht senden

5

Montag, 7. Mai 2007, 22:03

so, ich hab es geschafft, das ganze noch ein bisschen zu vereinfachen. bei gelegenheit werd ich vielleicht auch noch ne mouseover-funktion dazu machen damit man auch sieht wo man hinklicken muss... :)
aldi kaffee SOLL anders schmecken als die original wagner steinofenpizza!

Interozitor

Scribbler

Beiträge: 216

Wohnort: Wolfsburg

Beruf: Poooo

Danksagungen: 7

  • Private Nachricht senden

6

Montag, 7. Mai 2007, 22:58

Haste fein gemacht :3

Das mit dem cursor geht ganz einfach.. (wenn es das ist, was ich denke)

Nehmen wir beispielsweise den 'vorwärts-Pfeil', der da wäre:

Zitat

<td><img src="lautgedacht/next.gif" onclick="vor();" border="0"></td>


diesen änderst du (insoweit du css aktiviert hast) in

Zitat

<td><img src="lautgedacht/next.gif" onclick="vor();" border="0" style="cursor:pointer;"></td>


um... Da sieht man dann, das der cursor sich ändert (wie bei Links halt)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Interozitor« (7. Mai 2007, 22:59)


Interozitor

Scribbler

Beiträge: 216

Wohnort: Wolfsburg

Beruf: Poooo

Danksagungen: 7

  • Private Nachricht senden

7

Montag, 7. Mai 2007, 23:06

Achso - ist dein server auf dem deine website liegt php fähig? wenn ja, dann kannst du das ganze auch noch automatisiert ablaufen lassen, ohne den javascript code pflegen zu müssen , wie zum beispiel auf meiner seite:

http://borf.nl/smart/skidev2/displayfold…VybGlu&act=MQ==


dot ist im prinzip einfach nur noch ein hinterlegen von bildern in ordner, und den rest tut er selber machen.
Wenn du magst, kann ich dir das zeigen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Interozitor« (7. Mai 2007, 23:09)


kleines grünes

leeres Blatt

  • »kleines grünes« ist der Autor dieses Themas

Beiträge: 1 382

Wohnort: stuttgart

Beruf: mediengestalter (bild/ton)

Danksagungen: 595

  • Private Nachricht senden

8

Montag, 7. Mai 2007, 23:17

cool, danke!
...ich will aber, daß sich die linkfarbe beim drüberfahren ändert... und außerdem soll ja, wenn das neueste gerade angezeigt wird, der link dahin eigentlich kein link sein... jaja, madame hat mal wieder extrawünsche... :D
wie gesagt, werd mich bei gelegenheit nochmal damit beschäftigen.
php-fähig müsste der server eigentlich sein, aber ich denke in meinem fall geht das erst mal noch so - ich muss beim updaten ja sowieso auch im html-teil rumpfuschen, da kommts auf die eine zeile mehr nicht an... ;)
wenn ich dann irgendwann mal mehr zeit hab komm ich aber gern auf dein angebot zurück! =)
aldi kaffee SOLL anders schmecken als die original wagner steinofenpizza!

Interozitor

Scribbler

Beiträge: 216

Wohnort: Wolfsburg

Beruf: Poooo

Danksagungen: 7

  • Private Nachricht senden

9

Montag, 7. Mai 2007, 23:24

dann mach es mit

Zitat

<img onmouseover="this.src= 'lautgedacht/next_mouseover.gif'; " onmouseout="this.src="lautgedacht/next.gif";" src="lautgedacht/next.gif" onclick="vor();" border="0">


somit änderst du die 'farbe' des links (insofern du in diesem falle ein zweites gif 'next_mouseover.gif' erstellt hast)

Auf meiner seite siehst du das in ähnlicher weise. der unterschied dort ist, dass dort nur die farben geändert werden, und nicht das bild, wie bei dir

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Interozitor« (7. Mai 2007, 23:25)


Social Bookmarks


Thema bewerten