Plaats de html code in de body-sectie van jouw pagina, en plaats de stylesheet in de head-sectie van de pagina. Zorg er voor dat de afbeeldingen (afmetingen hiervan) overeenkomen met de hoogte en breedte van de items #afmeting_switch en .de_swap (in de stylesheet). Voor wat betreft de hoogte (van #afmeting_switch) moet je er voor zorgen dat er genoeg extra pixels worden gegeven om de onderstaande tekst (de links met de cijfers) onder de switcher te plaatsen. In dit voorbeeld zijn er 80 pixels toegevoegd aan de hoogte van de plaatjes (240 pixels). Je kan het aantal plaatjes (en de aansturende links) uitbreiden zo veel je wilt. Je kan de positie en de breedte van de links eenvoudig berekenen door het de breedte van de afbeelding(en) te delen door het aantal links (op één rij). In dit voorbeeld zijn dat de getallen: 0, 60, 120 en 180. Om de positie van de tweee rijen (met de nummering) te bepalen verlaag je de positie door bottom een negatieve waarde te geven. In dit voorbeeld is dat -33 en -63 pixels.
<div id="afmeting_switch">
<a id="image_switch_1" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>1</span></a>|
<a id="image_switch_2" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>2</span></a>|
<a id="image_switch_3" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>3</span></a>|
<a id="image_switch_4" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>4</span></a>|
<a id="image_switch_5" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>5</span></a>|
<a id="image_switch_6" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>6</span></a>|
<a id="image_switch_7" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>7</span></a>|
<a id="image_switch_8" class="de_swap" href="http://kompoos.nl/css/image-effects/image-switcher.html"><span>8</span></a>|
</div>
<style type="text/css">
#afmeting_switch{width:240px;height:320px;position:relative}
#afmeting_switch a{text-decoration:none}
.de_swap{display:block;width:240px;height:240px;position:absolute;top:0;left:0}
#image_switch_1{background:url(http://static.dns5.nl/image-switch-1.jpg) no-repeat;z-index:100}
#image_switch_2{background:url(http://static.dns5.nl/image-switch-2.jpg) no-repeat}
#image_switch_3{background:url(http://static.dns5.nl/image-switch-3.jpg) no-repeat}
#image_switch_4{background:url(http://static.dns5.nl/image-switch-4.jpg) no-repeat}
#image_switch_5{background:url(http://static.dns5.nl/image-switch-5.jpg) no-repeat}
#image_switch_6{background:url(http://static.dns5.nl/image-switch-6.jpg) no-repeat}
#image_switch_7{background:url(http://static.dns5.nl/image-switch-7.jpg) no-repeat}
#image_switch_8{background:url(http://static.dns5.nl/image-switch-8.jpg) no-repeat}
#image_switch_1 span{position:absolute;left:0px;bottom:-33px}
#image_switch_2 span{position:absolute;left:60px;bottom:-33px}
#image_switch_3 span{position:absolute;left:120px;bottom:-33px}
#image_switch_4 span{position:absolute;left:180px;bottom:-33px}
#image_switch_5 span{position:absolute;left:0px;bottom:-63px}
#image_switch_6 span{position:absolute;left:60px;bottom:-63px}
#image_switch_7 span{position:absolute;left:120px;bottom:-63px}
#image_switch_8 span{position:absolute;left:180px;bottom:-63px}
.de_swap span{text-align:center;background:#888;color:#333;
width:46px;display:block;height:19px;padding:6px;border:1px solid #999}
.de_swap:hover{z-index:1000}
.de_swap:hover span{background:#999;color:#333}
</style>