gebruikte techniek

In PhotoShop is eerst het vlak getekend dat elke knop gemeenschappelijk heeft.. Via de laagstijl Bevel en Emboss (Schuine kant en reliëf) kun je daar diepte aan geven. Deze laag met laagstijl is gedupliceerd, waarbij de laagstijl de richting is omgekeerd. Hierdoor zie je een ingedrukt effect. Door deze laag afwisselend zichtbaar te maken of te verbergen, kun je van elke knop de gewone en ingedrukte versie maken.
Het opschrift van elke knop is met het tekstgereedschap gemaakt. Het is hierbij verstanding om te beginnen met de langste tekst, zodat je kunt uitproberen wat de oprimale tekengrootte moet zijn. Elke tekst is in een aparte laag gezet. Door dupiceren en aan te passen, maakt je de tekst voor de roll-overfase. Voor drie knoppen maak je dus twee achtergrondlagen en 6 tekstlagen.

Voor elke knop maak je de gewenste achtergrond en gewenste teskt zichtbaar en sla je op voor het web.
Het is verstandig het psd-bestand ook te bewaren.

Ook de tranparante afbeelding maak je met PhotoShop: 1 pixel breed, 1 pixel hoog. De transparante afbeelding opgeslagen als ruimte.gif (velen noemen deze afbeelding liever spacer.gif).

In DreamWeaver wordt elke transparante afbeelding een afmeting van 150 bij 30 pixels meegegeven, omdat de knoppen zo groot waren. Elke afbeelding wordt in een eigen div geplaatst, zoals #k1, #k2 en #k3. Elke afbeelding linkt naar een andere pagina. Voor elke knop wordte een #k1 a geschreven, met daarin onder andere de achtergrondafbeelding van de knop, een float: left, en een marge. Daarnaast wordt voor elke afbeelding een #k1 a:hover beschreven met daarin de andere achtergrondafbeelding.

Om ervoor te zorgen dat de roll-over afbeeldingen toch worden geladen, zodat ze direct getoond kunnen wordenals de muis erover gaat, kun je voor elke afbelding een div maken, met de afbeelding op de achtergrond. de div heeft een afmeting van 1 bij 1 pixel. dat kun je hier achter in de code van deze pagina lezen...