Er is geen CSS ondersteuning.
Deze image-switcher is al stok- en stok-oud. Toch doet hij nog probleemloos zijn werk in alle browsers. De procedure is handig als je op een klein oppervlak veel plaatjes wilt laten zien. Buiten dat de procedure cross-browser is, is hij ook nog eens super-makkelijk. Een paar regels CSS en een div doen de "truc". Hieronder staat de css die je naar eigen smaak kan aanpassen. Je kan zoveel plaatjes en linkjes gebruiken als je wilt. Bereken de breedte van de links door de "width" van het plaatje te delen door het aantal links en geef dan de "left" het juiste aantal pixels. In dit voorbeeld zijn de getalletjes: 0, 60, 120 en 180. De hoogte van de rijtjes is in dit voorbeeld -33 en -63 pixels. Plaats de css van de image-switcher in de head van de pagina:
<style type="text/css">
#positie{
width:240px;
margin-left:100px;
position:relative}
.de-switch{
display:block;
width:240px;
height:240px;
position:absolute;
top:0;left:0}
#image-1{background:url(http://static.dns5.nl/switch-1.jpg) no-repeat;z-index:100}
#image-2{background:url(http://static.dns5.nl/switch-2.jpg) no-repeat}
#image-3{background:url(http://static.dns5.nl/switch-3.jpg) no-repeat}
#image-4{background:url(http://static.dns5.nl/switch-4.jpg) no-repeat}
#image-5{background:url(http://static.dns5.nl/switch-5.jpg) no-repeat}
#image-6{background:url(http://static.dns5.nl/switch-6.jpg) no-repeat}
#image-7{background:url(http://static.dns5.nl/switch-7.jpg) no-repeat}
#image-8{background:url(http://static.dns5.nl/switch-8.jpg) no-repeat}
#image-1 span{position:absolute;left:0px;bottom:-33px}
#image-2 span{position:absolute;left:60px;bottom:-33px}
#image-3 span{position:absolute;left:120px;bottom:-33px}
#image-4 span{position:absolute;left:180px;bottom:-33px}
#image-5 span{position:absolute;left:0px;bottom:-63px}
#image-6 span{position:absolute;left:60px;bottom:-63px}
#image-7 span{position:absolute;left:120px;bottom:-63px}
#image-8 span{position:absolute;left:180px;bottom:-63px}
.de-switch span{
text-align:center;
background:#030;
color:#fb0;
width:46px;
display:block;
height:19px;
padding:6px;
border:1px solid #050}
.de-switch:hover{z-index:1000}
.de-switch:hover span{
background:#040;
color:#fbc}
</style>
En in de body van de pagina plaats je de onderstaande "div" om dit voorbeeld op het scherm te "zetten".
<div id="positie"> <a id="image-1" class="de-switch" href="#"><span>1</span></a>| <a id="image-2" class="de-switch" href="#"><span>2</span></a>| <a id="image-3" class="de-switch" href="#"><span>3</span></a>| <a id="image-4" class="de-switch" href="#"><span>4</span></a>| <a id="image-5" class="de-switch" href="#"><span>5</span></a>| <a id="image-6" class="de-switch" href="#"><span>6</span></a>| <a id="image-7" class="de-switch" href="#"><span>7</span></a>| <a id="image-8" class="de-switch" href="#"><span>8</span></a>| </div>
Als je met jouw muis de broncode van deze switch-procedure even "naar boven haalt", kan je het stukje javascript zien wat op deze pagina gebruikt wordt om de pagina (de html) zo snel als mogelijk op het scherm te "zetten". Voor de "switch" heb je dit scriptje natuurlijk niet nodig; maar snelheid is altijd belangrijk voor de waardering van google-bot voor alle pagina's op jouw website.
cache 19-01-2011