Wie macht man mit HTML eine Slideshow mit Buttons

Von: , Frage gestellt am Mi, 14. Apr 2010

Wie schaft man es mit HTML eine Art Slideshow für Bilder zu machen, die allerdings nicht automatisch abläuft, sonder über Buttons?

Also gemeint ist, dass per Knopfdruck immer ein neues Bild kommt. Ungefähr so wie hier http://sarahburrini.com/wordpress/?p=1148 mit "Next" und "Previous" Knopf etc.

Zeichne selber Comics und wollte das gerne auf meinem Blog haben^^)

Wer echt super nett wenn mir jemand erkären könnte wie das geht^^

Schon mal Danke im Vorraus^^

LG

SR

4 Antworten zu dieser Frage

Antwort von nach 31 Minuten 0 hilfreich

Re: Wie macht man mit HTML eine Slideshow mit Butt

Nur mit reinem HTML? Über Links.

D.h., du müsstest dir Bilder für "prev", "next" usw. machen und die, mit entspr. Link versehen, unter deinem jeweiliges Bild anordnen. Für jedes Bild bräuchtest du dann eine eigene Seite, also z.B. bild1.html, bild2.html,...

Ist natürlich sehr aufwändig und umständlich, ist aber dann halt nur mit HTML erstellt.

Einfacher wird die Sache, wenn du mit JavaScript arbeitest oder besser mit PHP. Aber das wäre dann eine andere Baustelle :-)

Gruß, Robi

Antwort von nach 48 Minuten 0 hilfreich

Re: Wie macht man mit HTML eine Slideshow mit Butt

Hier ein Beispiellisting:

<html>
<head>
<title>Slideshow</title>
<script language="javascript">
function next(){
var lastimg=document.slideshow.lastimg.value;
var index=document.slideshow.index.value;
index++;
if(index>=lastimg){index=lastimg;}
document.slideshow.index.value=index;
document.slideshow.image.src="img/" + index + ".jpg";
}
function prev(){
var index=document.slideshow.index.value;
index--;
if(index<=1){index=1;}
document.slideshow.index.value=index;
document.slideshow.image.src="img/" + index + ".jpg";
}
</script>
</head>
<body>
<form name="slideshow">
<input type="button" value="<<" onclick="javascript:prev()"><input type="button" value=">>" onclick="javascript:next()"><br>
<br>
<input type="hidden" name="lastimg" value=4>
<input type="hidden" name="index" value=1>
<img id="image" src="img/1.jpg">
</form>
</body>
</html>

Hinweise:
-Die Bilder müssen die Endung ".jpg" haben.
-Die Bilder müssen in einem Ordner names "img" liegen, der im selben Ordner wie die HTML-Datei liegen muss.
-Die Dateinamen der Bilder müssen ohne führende Nullen durchnummeriert sein.
-In der Zeile

<input type="hidden" name="lastimg" value=4>

muss hinter "value=" die Nummer der letzten Bilddatei eingetragen werden.

Antwort von nach einer Stunde 0 hilfreich

Re^2: Wie macht man mit HTML eine Slideshow mit Bu

Vielen Dank^^)
- Antwort von nach 16 Stunden 0 hilfreich
  
  Re^3: Wie macht man mit HTML eine Slideshow mit Bu
  
  Hallo,
  
  der Vollständigkeit halber sei gesagt, dass diese Lösung nicht reines HTML ist, wie Du gefordert hast, sondern JavaScript. Ist JavaScript abgeschaltet, passiert gar nichts. Eine gute Lösung ist das also sicher nicht.
  
  Liebe Grüße,
  -Efchen

Keine passende Antwort gefunden? Jetzt eigene Frage stellen!