Mehrere Bildwechsel in Tabelle mit Javascript
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
array
beispiel
bild
code
eigene menge
funktion
http
image
ordner
realisieren
schauen
sekunde
stattfinden
tabelle
umsetzung
url
verwenden
wink
zelle
zustimmenden antwort
-
Hi!
Ich habe folgendes Problem:
Ich möchte in einer Tabelle mehrere automatisch ablaufende Bildwechsel realisieren. In jeder der Zellen der Tabelle soll ein eigener Bildwechsel stattfinden mit jeweils anderen Bildern.
Folgenden Code habe ich bereits:
<html> <head> <title>Schauen Sie auch hier:</title> </head> <body onload='start();'> <table border="1" width="100%"> <tr> <td colspan="5">Schauen Sie auch hier:</td> </tr> <tr> <td> <img id="image" src="http://www.xyz.de./ordner/Bild1.JPG" alt="describing text for image one" title="title for image one" width="100" height="100" /> <script language="JavaScript"> var images = new Array( ["http://www.xyz.de/ordner/Bild1.JPG", "Beschreibung", "Titel Bild1"], ["http://www.xyz.de/ordner/Bild2.JPG", "Beschreibung", "Titel Bild2"] ); var counter = 0; function start() { var image = document.getElementById('image'); image.setAttribute('src', images[counter % (images.length)][0]); image.setAttribute('alt', images[counter % (images.length)][1]); image.setAttribute('title', images[counter % (images.length)][2]); counter++; setTimeout("start()", 2000); } </script> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </tr> </table> </body> </html>
Wie realisiere ich es denn nun, dass ich in jeder der Zellen einen Bilderwechsel hinbekomme?
Ich habe schon einiges ausprobiert, jedoch hat nichts wirklich geklappt, außer dem 1. Bilderwechsel... Muss ich irgendwas noch durchnummerieren oder so damit sich die Javascripts nicht in den weg kommen??
Beitrag zuletzt geändert: 4.9.2012 12:08:31 von aahmeise -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
1. Verwende bitte bei Code auch das
-Tag, das macht den Code besser lesbar[code]
2. In jeder Zelle der Tabelle soll ein Bild sein, das nach 2 Sekunden zum nächsten wechseln soll?
3. Jede dieser Zellen hat eine eigene Menge an Bildern zwischen denen gewechselt wird? -
Zu 1: Sorry! Das hab ich nicht bedacht... (berichtigt)
Zu 2: richtig
Zu 3: genau
Beitrag zuletzt geändert: 4.9.2012 12:08:50 von aahmeise -
Zu 1:
besser ;)
... man kann sogar Code-Highlighting (Syntaxhervorhebung) je Sprache machen
siehe hier: https://www.lima-city.de/2008/forum#formatierung Abschnitt Code
... für verschiedene "Sprachen"
Beispiele:
[ code ] array ( 'info' => 'ohne Syntaxhervorhebung' ) [ /code ]
[ code=html ] <strong>HTML-Code hier</strong> [ /code ]
[ code=js ] var mystring = 'Javascript-Code hier'; [ /code ]
[ code=php ] <?php echo "Hallo Welt"; ?> [ /code ]
(... Nutzung aber ohne die Leerzeichen innerhalb der [ eckigen Klammern ] !!! )
Zu 2:
mach die Javascript-Funktion nicht in die Tabelle rein
sondern oben im HEAD Bereich der Seite
und beim Funktionsaufruf die ID der Zelle übergeben
function start( tabid ) { var image = document.getElementById(tabid); // ... usw. ... }
und in der Tabelle als Zellen:
<table ... ...> <tr> <td id="zelle1"> .... </td> <td id="zelle2"> .... </td> <td id="zelle3"> .... </td> </tr> <tr> <td id="zelle4"> .... </td> <td id="zelle5"> .... </td> <td id="zelle6"> .... </td> </tr> </table>
Zu 3:
mach ein mehrdimensionales Array (auch oben im HEAD Bereich der Seite)
var images = new Array(); images['zelle1'] = new Array( ["http://www.xyz.de/ordner/Bild1a.JPG", "Beschreibung1a", "Titel Bild1a"], ["http://www.xyz.de/ordner/Bild1b.JPG", "Beschreibung1a", "Titel Bild1b"] ); images['zelle2'] = new Array( ["http://www.xyz.de/ordner/Bild2a.JPG", "Beschreibung2a", "Titel Bild2a"], ["http://www.xyz.de/ordner/Bild2b.JPG", "Beschreibung2a", "Titel Bild2b"] ); images['zelle3'] = new Array( ["http://www.xyz.de/ordner/Bild3a.JPG", "Beschreibung3a", "Titel Bild3a"], ["http://www.xyz.de/ordner/Bild3b.JPG", "Beschreibung3a", "Titel Bild3b"] ); // ... usw. ...
und dann kannst Du in einer for (bzw. foreach) Schleife jeweils die Funktion aufrufen
... oder gleich (direkt) das mehrdimensionales Array in der Funktion durchlaufen
je "key" aus der 1.Ebene vom Array images als Parameter für Funktions-Aufruf verwenden
... oder gleich (direkt) beim Durchlauf alle 2 Sekunden das Bild zum "key" wechseln
ich hoffe das hilft weiter
-
aahmeise schrieb:
Stark vereinfacht geht es so:
Ich möchte in einer Tabelle mehrere automatisch ablaufende Bildwechsel realisieren. In jeder der Zellen der Tabelle soll ein eigener Bildwechsel stattfinden mit jeweils anderen Bildern.
...
Wie realisiere ich es denn nun, dass ich in jeder der Zellen einen Bilderwechsel hinbekomme?
Beispiel
Quelltext
<html><head><title>Schauen!</title> <script language="JavaScript"> // config start var ordner = 'bildchen/', sekunden = '5', // config end counter = 0, img1 = '', images = new Array( [ordner + "1.gif", "Bildchen 1", "zwinker"], [ordner + "2.gif", "Bildchen 2", "grins"], [ordner + "3.gif", "Bildchen 3", "Zunge rausstreck"] ); function start() { img1 = document.getElementById('id_1'), img2 = document.getElementById('id_2'), img3 = document.getElementById('id_3'); img1.setAttribute('src', images[counter % (images.length)][0]); img1.setAttribute('alt', images[(counter) % (images.length)][1]); img1.setAttribute('title', images[(counter) % (images.length)][2]); img2.setAttribute('src', images[(counter+1) % (images.length)][0]); img2.setAttribute('alt', images[(counter+1) % (images.length)][1]); img2.setAttribute('title', images[(counter+1) % (images.length)][2]); img3.setAttribute('src', images[(counter+2) % (images.length)][0]); img3.setAttribute('alt', images[(counter+2) % (images.length)][1]); img3.setAttribute('title', images[(counter+2) % (images.length)][2]); counter++; setTimeout("start()", (sekunden*1000)); } </script> </head> <body onload='start();'> <table border="1" width="100%"> <tr> <td colspan="5">Schauen Sie auch hier:</td> </tr> <tr> <td> <img id="id_1" src="bildchen/1.gif" alt="Bildchen 1" title="Titel Bild 1" /> </td> </tr> <tr> <td> <img id="id_2" src="bildchen/2.gif" alt="Bildchen 2" title="Titel Bild 2" /> </td> </tr> <tr> <td> <img id="id_3" src="bildchen/3.gif" alt="Bildchen 3" title="Titel Bild 3" /> </td> </tr> </table> </body> </html>
Beitrag zuletzt geändert: 4.9.2012 21:46:40 von menschle -
@menschle: Sehe ich es richtig, daß in deinem Beispiel alle Tabellenzellen den gleichen Bilderpool verwenden?
Das paßt nicht zur zustimmenden Antwort auf "3. Jede dieser Zellen hat eine eigene Menge an Bildern zwischen denen gewechselt wird?"
Da finde ich das Beispiel von plugboard sinnvoller.
@aahmeise: Achte bei der Umsetzung darauf, daß auch Nutzer ohne JS Bildinhalte zu sehen bekommen. Z.B. durch ein als default hinterlegtes Bild, das durch die JS-Funktion später ersetzt wird. Wenn das gewährlsitet ist, würde ich den Funktionsaufruf auch ans Ende des Seitencodes setzen oder per onload() aufrufen. Das beschleunigt den Seitenaufbau.
Dadurch erreichst Du die beste Leistung für ALLE User.
Beitrag zuletzt geändert: 5.9.2012 0:38:57 von fatfreddy -
fatfreddy schrieb:
War die Frage zur Lösung denn eine andere?
@menschle: Sehe ich es richtig, daß in deinem Beispiel alle Tabellenzellen den gleichen Bilderpool verwenden?
fatfreddy schrieb:
So möge es ein sinnvolleres, direkt nachvollziehbares Beispiel geben.
Das paßt nicht zur zustimmenden Antwort auf "3. Jede dieser Zellen hat eine eigene Menge an Bildern zwischen denen gewechselt wird?"
Da finde ich das Beispiel von plugboard sinnvoller.
Veranschaulicht, zum nachvollziehen.
Theorie ist toll, Praxis toller.
fatfreddy schrieb:
Und eben dieses ist in meinem Beispiel umgesetzt.
@aahmeise: Achte bei der Umsetzung darauf, daß auch Nutzer ohne JS Bildinhalte zu sehen bekommen. -
menschle schrieb:
Dann liefere ich sowas hier ab, unter der Voraussetzung, dass der TE auch PHP verwenden kann... und dieses Mal zu 100% Dynamisch, also alles was verändert werden muss ist das Array mit den Bildern.
fatfreddy schrieb:
So möge es ein sinnvolleres, direkt nachvollziehbares Beispiel geben.
Das paßt nicht zur zustimmenden Antwort auf "3. Jede dieser Zellen hat eine eigene Menge an Bildern zwischen denen gewechselt wird?"
Da finde ich das Beispiel von plugboard sinnvoller.
Veranschaulicht, zum nachvollziehen.
Theorie ist toll, Praxis toller.
Demo und Quellcode:<?php // Hilfsfunktion um Schreibarbeit zu ersparen function image($url, $title, $alt) { return array( 'url' => $url, 'title' => $title, 'alt' => $alt ); } // alle Bilder befinden sich in diesem "Ordner" $directory = 'http://www.lima-city.de/images/smilies'; // alle Bilder // die Struktur: // erstes Dimension = Bildergruppen // zweite Dimension = einzelne Bilder zwischen denen gewechselt wird $images = array( array( image('biggrin.gif', 'Bild 1', 'biggrin'), image('wink.gif', 'Bild 2', 'wink'), image('cool.gif', 'Bild 3', 'cool'), image('confused.gif', 'Bild 4', 'confused'), image('slant.gif', 'Bild 5', 'slant') ), array( image('angel.gif', 'Bild 6', 'angel'), image('blah.gif', 'Bild 7', 'blah'), image('thumb.gif', 'Bild 8', 'thumb'), image('mad.gif', 'Bild 9', 'mad'), image('eek.gif', 'Bild 10', 'eek'), image('lol.gif', 'Bild 11', 'lol') ), array( image('wave.gif', 'Bild 12', 'wave'), image('nosmile.gif', 'Bild 13', 'nosmile'), image('tongue.gif', 'Bild 14', 'tongue'), image('prost.gif', 'Bild 15', 'prost'), image('spammer.gif', 'Bild 16', 'spammer'), image('megarofl.gif', 'Bild 17', 'megarofl'), image('smile.gif', 'Bild 18', 'smile'), image('smokin.gif', 'Bild 19', 'smokin'), image('king.gif', 'Bild 20', 'king'), image('puke.gif', 'Bild 21', 'puke') ) ); // den Tabelleninhalt anhand der Bilder aufbauen, sodass jede // Bildergruppe eine eigene Zeile bekommt $tablecontent = ''; foreach($images as $i => $entry) { $starturl = "$directory/{$entry[0]['url']}"; $startalt = $entry[0]['alt']; $starttitle = $entry[0]['title']; $tablecontent .= "<tr><td><img id=\"img-$i\" src=\"$starturl\" alt=\"$startalt\" title=\"$starttitle\" /></td></tr>"; } // Bilderarray für JavaScript codieren $images_json = json_encode($images); // Das JavaScript für den Bildwechsel $javascript = <<< EOT var directory = '$directory'; var imageRotation = new Array(); // aktuelles Bild in jeder Gruppe var images = $images_json; // "aktuelles Bild" initialisieren for(var i = 0; i < images.length; i++) imageRotation[i] = 0; // alle 3 Sekunden => Bildwechsel setInterval('rotateImages();', 3000); function rotateImages() { var imageCount = images.length; for(var i = 0; i < imageCount; i++) { var img = document.getElementById('img-' + i); imageRotation[i]++; imageRotation[i] %= images[i].length; img.src = directory + '/' + images[i][imageRotation[i]].url; img.alt = images[i][imageRotation[i]].alt; img.title = images[i][imageRotation[i]].title; } } EOT; // gesamte HTML-Seite aufbauen $content = <<< EOT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>Bildwechsel</title> <script type="text/javascript"><!-- $javascript // --></script> </head> <body> <table> $tablecontent </table> </body> </html> EOT; // und ausgeben echo($content); ?> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
