Webdesign
Home
HOME

Image buttons nader verklaard:

Afbeeldingen kunnen ook dienst doen als knoppen voor links om mee te navigeren. Op het internet zijn allerlei afbeeldingen beschikbaar zoals bijvoorbeeld op www.cooltext.com, maar om een huisstijl te ontwikkelen is het ook zeer goed zelf te doen in beeldbewerkingsprogramma's zoals Paint Shop Pro of Photoshop.
Let er hierbij vooral op de afbeeldingen op te slaan op het formaat zoals je ze op de pagina wilt afbeelden. Het is weliswaar mogelijk een afbeelding met een groot formaat te laden en die dan op een kleiner formaat te plaatsen door de hoogte en breedte van de afbeelding te specificeren. Dit heeft als nadeel dat wel de grotere hoeveelheid pixels geladen moeten worden terwijl ze niet gebruikt worden, de browser moet er zelfs extra berekeningen voor laten maken. Sla de afbeelding op in het daarvoor meest geschikte bestandsformaat met een zo groot mogelijke compressie om te grote bestanden te voorkomen.

Deel van broncode van de hoofdpagina img_button.html:

<a href="img_button_informatie.html"><img src="../images/button_informatie.gif" alt="Informatie" border="0"></a>

De link-tag-<A> wordt voorzien van doeladres "image_button_informatie.html" door het attribuut HREF. De afbeelding (img) "button_informatie.gif" wordt opgeroepen door het attribuut IMG SRC. Het is aan te raden ook het attribuut ALT te gebruiken. Mochten er zich problemen voordoen met het laden van de afbeelding dan wordt de ALT-tekst zichtbaar in plaats van de afbeelding zelf.