Grafiken im Marquee Tag

Wir haben bisher gesehen, dass wir nicht nur einfachen oder formatierten Text sondern auch Hyperlinks mittels marquee-Tag über den Bildschirm laufen lassen können. Im Grunde geht das für jede Art von HTML-Element, nicht zuletzt auch für Grafiken.

Schauen wir uns die Sache mal an.

Beispiel mit Kommentaren (nicht kopieren !)

<!--ganz langsam-->
<marquee scrollAmount="1" scrollDelay="2"
<!--nach oben, Breite und Höhe wie Bild, kann auch weggelassen werden-->
direction="up" width="191px" height="96px">
<!--Bild  hat keinen Rand-->
<img border="0"
<!--Speicherort des Bildes, muss natürlich angepasst werden-->
<!--Wenn man die Bilder bei xPage hochgeladen hat, lässt sich der Speicherort-->
<!--des Bildes nach dem Hochladen ermitteln-->
src="http://www.yopage.de/userdaten/000020/73/bilder/bolivien_flagge.jpg"
<!--Breite und Höhe des Bildes, kann auch weggelassen werden-->
width="191" height="96"> </a>
</marquee>

Beispiel zum Kopieren

<marquee scrollAmount="1" scrollDelay="2"
direction="up" width="191px" height="96px">
<img border="0"
src="http://www.yopage.de/userdaten/000020/73/bilder/bolivien_flagge.jpg"
width="191" height="96"> </a>
</marquee>

So sieht das Beispiel dann aus:

Wenn man zwei Marquees mit unterschiedlicher Laufrichtung lückenlos zusammenfügt, kann man einen interessanten Effekt erzielen, wie man hier sieht:

Der unkommentierte Quelltext dafür lautet:

<marquee scrollAmount="1" scrollDelay="2" direction="up" width="191px" height="96px">
<img border="0" 
src="http://www.yopage.de/userdaten/000020/73/bilder/bolivien_flagge.jpg" 
width="191" height="96">
</a></marquee><br>
<marquee scrollAmount="1" scrollDelay="2" direction="down" width="191px" height="96px">
<img border="0" 
src="http://www.yopage.de/userdaten/000020/73/bilder/bolivien_flagge.jpg" 
width="191" height="96">
</a></marque>

Dieser Effekt hat leider einen kleinen Schönheitsfehler: Im Firefox-Browser bleibt eine kleine Lücke zwischen den beiden Marquees. Um diesen zu beseitigen, müssen wir die beiden Marquees in zwei direkt untereinander stehende Tabellenzellen verpacken. Das sieht dann so aus:

Und hier der Quelltext:

<table border="0" style="border-collapse: collapse" width="200" cellpadding="0"> 
<tr>
<td>
<marquee scrollAmount="1" scrollDelay="2" direction="up" width="191px" height="96px">
<img border="0" 
src="http://www.yopage.de/userdaten/000020/73/bilder/bolivien_flagge.jpg" 
width="191" height="96"> </a>
</marquee>
</td>
</tr>
<tr>
<td>
<marquee scrollAmount="1" scrollDelay="2" direction="down" width="191px" height="96px">
<img border="0" 
src="http://www.yopage.de/userdaten/000020/73/bilder/bolivien_flagge.jpg" 
width="191" height="96"></a>
</marquee>
</td>
</tr>
</table>

Navigation

Grafiken im Marquee Tag