Navigation

• Home
• Vorbemerkung
• Grundaufbau
• Attribute
• Lauftext formatieren
• Hyperlinks
• Grafiken
• Effekte maßvoll einsetzen

Marquee und JaveScript kombinieren

Mehrere Bilder

Bevor wir zur Kombination des marquee-Tags mit JavaScript-Sequenzen kommen zunächst ein Zwischenschritt. Bisher haben wir jeweils nur ein Bild innerhalb eines marquees gezeigt. Man kann aber auch mit mehreren Bildern eine kleine Diashow produzieren.

Wir haben vier Grafikdateien, alle 600px breit und 900px hoch, die wir mit einem Drittel dieser Größe Anzeigen wollen. Der folgende Code rollt vier Bilder nacheinander von rechts nach links über den Bildschirm:

<marquee scrollAmount="1" scrollDelay="2" 
direction="left" width="200px" height="300px">
<img border="0" src="images/Bild1.jpg" width="200" height="300">
<img border="0" src="images/Bild2.jpg" width="200" height="300">
<img border="0" src="images/Bild3.jpg" width="200" height="300">
<img border="0" src="images/Bild4.jpg" width="200" height="300">
</marquee>

Der Pfad zu den Bildern muss natürlich den individuellen Gegebenheiten angepasst werden.

Das sieht dann so aus:

Bilder mit Link

Wenn wir die Bilder auch noch als Link einfügen, kann man jedes vorbeirollende Bild zu Großansicht anklicken. Der HTML-Code dazu:

<marquee scrollAmount="1" scrollDelay="2" 
direction="left" width="200px" height="300px">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild1.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild2.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild3.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild4.jpg" width="200" height="300">
</marquee>

Und hier die Beispielansicht.

Bildlauf anhalten

Um den Bildlauf anzuhalten, brauchen wir eine kurze JavaScriptsequenz. Hier zunächst der HTML-Code:

<marquee scrollAmount="1" scrollDelay="2" 
direction="left" width="200px" height="300px"
onmouseover="javascript:this.scrollAmount=0" 
onmouseout="javascript:this.scrollAmount=2">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild1.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild2.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild3.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild4.jpg" width="200" height="300">
</marquee>

 

Wenn man mit der Maus in den Bildbereich kommt, hält der Bildlauf an. Klickt man auf ein Bild, öffnet sieht man das Bild in Großansicht. Die Anzeige sieht dann so aus.

Zum besseren Verständnis hier noch einmal der Quelltext mit einigen Kommentaren:

<!--zunächst die schon bekannte Einleitung des marquee-tags-->
<marquee scrollAmount="1" scrollDelay="2" 
direction="left" width="200px" height="300px"
<!--Jetzt JScript: Wenn Maus über dem Marquee setzte scrollAmount auf 0-->
onmouseover="javascript:this.scrollAmount=0" 
<!--Jetzt JScript: Wenn Maus Marquee verlässt setzte scrollAmount wieder auf 2-->
onmouseout="javascript:this.scrollAmount=2">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild1.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild2.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild3.jpg" width="200" height="300">
<a href="images/Bild1.jpg">
<img border="0" src="images/Bild4.jpg" width="200" height="300">
</marquee>