nicht angemeldet
Bild durch Klick ersetzen (Wiederholbar)
Hallo!
Ich habe auf meiner Seite ein Bild. Ich möchte, dass sich das Bild durch anklicken ändert. Wenn man erneut auf das Bild klickt, soll das erste Bild wieder erscheinen, quasi eine Endlosschleife.
Ich habe folgendes:
<body>
<a href="#" onclick="document.img1.src='bild1.gif';"><img
src="bild2.gif" alt="Click" name="img1" border="0"
height="40" width="100"></a>
</body>
Damit kann ich ein Bild durch ein anderes ersetzen. Aber wie mach ich es, dass wieder das erste Bild erscheint?
Im Grunde will ich dann auch mehrere Bilder in eine Schleife packen (so 3-4) ... dass jeweils durch einen Klick 1-2-3-4-1-2-3 ... usw. sich die Bilder ändern.
Ich danke jetzt schon für die Hilfe.
Mit besten Grüßen
Martin
-
Hi,
Im Grunde will ich dann auch mehrere Bilder in eine Schleife packen (so 3-4) ... dass jeweils durch einen Klick 1-2-3-4-1-2-3 ... usw. sich die Bilder ändern.
Ich würde eine if-Schleife programmieren. Also ungefähr so:
function bildwechseln (){ var document.getElementById('Bild') = Bild if (Bild.src && Bild.src == bild1.jpg){ Bild.src = "bild2.jpg";} else if (Bild.src && Bild.src == bild2.jpg){ Bild.src = "bild3.jpg";} }(usw...je nachdem, wie viele Bilder du willst)
Das Beispiel geht davon aus, dass dein Bild die ID "Bild" hab und die Bilder Bild1, Bild2 usw. heißen.Jedenfalls würde ich's so machen. Aber vielleicht gibt's auch noch 'ne kürzere Lösung.
Einen schönen Mittwoch noch!
--
Experten raten von der Verwendung des Internet Explorers ab!
Diese Programme braucht man, um Webseiten zu bauen!
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}-
Hi,
Ich hab vergessen, die Dateinamen in Anführunsstriche zu setzen. So wäre es Richtig:
function bildwechseln (){ var document.getElementById('Bild') = Bild if (Bild.src && Bild.src == "bild1.jpg"){ Bild.src = "bild2.jpg";} else if (Bild.src && Bild.src == "bild2.jpg"){ Bild.src = "bild3.jpg";} ... }Einen schönen Mittwoch noch!
--
Experten raten von der Verwendung des Internet Explorers ab!
Diese Programme braucht man, um Webseiten zu bauen!
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:} -
Hallo D.R.,
Ich würde eine if-Schleife programmieren. Also ungefähr so:
<gebetsmuehle>
if, else etc. gehoeren zu den Conditional Statements (Bedingungen), nicht zu Loop Statements (Schleifen).
</gebetsmuehle>var document.getElementById('Bild') = Bild
Bist du sicher, dass du das so herum wolltest?
if (Bild.src && Bild.src == bild1.jpg){
Grundsaetzlich kann man sowas natuerlich mit if und else loesen, aber dann brauchst du einen Bedingungsblock pro Bild
Viel einfacher waere es doch zu sagen:Vorausgesetzt alle Bilder heissen 'bild123.jpg', wobei 123 ein Zaehler sein soll, koennte man sagen
<img src=..... onclick="bildwechsel(this)" />function bildwechsel(sender)
{
// Ich mache das hier zum besseren Verstaendnis in kleinen Schritten
// Das Bild im Beispiel ist Bild5.jpg// Bildsnamen rausfinden
// a. src in array splitten
var bildNameArray = sender.src.split('/');
// b. letztes Element aus dem Array auslesen (bildName ist danach 'Bild5.jpg'
var bildName = bildNameArray.pop();// die laufende Nummer rausfinden
bildName = bildName.replace(/Bild/, '') // bildName ist jetzt '5.jpg'
var bildNummer = parseInt(bildName) // enthaelt jetzt '5'
var neueNummer = bildNummer + 1 // enthaelt jetzt '6'
var neuerName = 'bild' + bildNummer.toString() + '.jpg' // enthaelt jetzt 'bild6.jpg'
var neueSrc = sender.src.replace(bildName, neuerName) // ist jetzt 'http://...../bild6.jpg'sender.src = neueSrc
}Das war jetzt alles etwas umstaendlich, aber hoffentlich verstaendlich. Was fehlt ist zB. ein Schwellwert, d.h. die hoechste Bildnummer. Dann koennte man beispielsweise sagen
if(neueNummer >= vorgegebenerSchwellwert)
{
neueNummer = 1;
}Man koennte ein Directorylisting im Bilderverzeichnis machen, daraus ein Javascript-Array und sich dann darauf beziehen, da sind etliche Sachen machbar.
Gruß,
Dieter
-