Marquee slideshow:
Er zijn verschillende manieren om een slideshow te maken. (Zie ook mijn andere slideshow-tutorials). Een makkelijke manier is de marquee-code. Behalve voordelen heeft de code ook nadelen, want hij werkt niet in alle browsers. In de Internet Explorer in ieder geval wel!
We beginnen hieronder met de basiscode voor één plaatje:
<marquee>
<img src="typo7.gif">
</marquee>
Zoals je ziet beweegt het plaatje zich over de hele breedte van rechts naar links.
Je hoeft niet de volle breedte van 100% te nemen. Korter kan ook:
<marquee width="20%"><img src="v19.gif"></marquee>
* * *
De basiscode weer, maar nu voor 10 plaatjes:
<marquee>
<img src="z1.jpg">
<img src="z2.jpg">
<img src="z3.jpg">
<img src="z4.jpg">
<img src="z5.jpg">
<img src="z6.jpg">
<img src="z7.jpg">
<img src="z8.jpg">
<img src="z9.jpg">
<img src="z10.jpg">
</marquee>
Je kunt natuurlijk zo veel plaatjes toevoegen als je wilt.
Wil je een achtergrondje? Breid de marquee-code dan uit:
<marquee bgcolor="#FFC0C0">
Zo ziet het eruit met een achtergrond:
* * *
Je kunt ook de richting bepalen: van rechts naar links (= standaard), van links naar rechts, van boven naar beneden en van beneden naar boven. Hieronder een voorbeeld van links naar rechts:
<marquee direction="right">
<img src="z1.jpg">
<img src="z2.jpg">
<img src="z3.jpg">
<img src="z4.jpg">
<img src="z5.jpg">
<img src="z6.jpg">
<img src="z7.jpg">
<img src="z8.jpg">
<img src="z9.jpg">
<img src="z10.jpg">
</marquee>
* * *
Nu van boven naar beneden:
<marquee direction="down" height="80">
<img src="z11.jpg">
</marquee>
En natuurlijk ook van beneden naar boven:
<marquee direction="up" height="80">
<img src="v16.gif">
</marquee>
Stel dat je een verticale slideshow wilt maken. Dan voeg je wat regelomhalen en harde spaties toe:
<marquee direction="down" height="150">
<img src="v14.gif"> <BR>
<img src="z2.jpg"> <BR>
<img src="square7.gif">
</marquee>
Vergeet niet de hoogte/height aan te passen aan het aantal plaatjes!
De marquee-code heeft nog meer mogelijkheden. Met de eigenschappen scrolldelay en scrollamount kun je de snelheid instellen. De code voor het eerste voorbeeld:
<marquee scrolldelay="200">
<img src="typo7.gif">
</marquee>
De code voor het tweede voorbeeld:
<marquee scrollamount="30">
<img src="typo7.gif">
</marquee>
Plaatjes afkomstig van Mandarin Design.
Zie ook deze tutorial.
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal