Rollover på et fotografi
Denne rollover synes jeg selv er ganske smart. Eksemplet viser, hvorledes du med enkle midler kan lave en rollover på et fotografi.
Fotoet er skåret i 4 lige store stykker. Hver af de fire stykker er så lavet i 2 udgaver, dels den lidt slørede, der svarer til off-tilstanden, og dels den noget skarpere udgave, der svarer til mouseover-tilstanden.
De 4 off-grafikker er så lagt ind i 4 tabelceller og hele websiden er så forsynet med vort universalscript til rollovers (Grafikken i Arrays).
Der er andre måder at løse denne opgave på, hvis man kan noget dynamisk HTML, men det er en anden historie, som de siger. Den fortæller jeg om på demosiden: Highlighting af hotspots på et billede.
De principper, vi har kigget på i de 8 artikler i denne sektion, kan vi overføre til et helt andet område, nemlig udviklingen af dias- eller slideshows. Det er der også en lille serie artikler om: Slideshows.
Denne side er senest opdateret: 2. December, 2006
Læs også:
Sidenummermenu
Introduktion til stylesheet-formaterede menuer
Universal CSS-rollover.
Syntaksen for manipulation med et element på en webside er i disse artikler ændret til at være i bedre overensstemmelse med W3C's dokumentobjektmodel (Document Object Model, DOM) end mine tidligere artikler om emnet.
Forskellen er lille, men af stor betydning. I stedet for at tilgå
img-elementet via dets name:
document.knap.src
tilgås det nu via dets id:
document.images.ID.src
