HTML Afbeelding links

Het creëren van een afbeelding link is eenvoudig. Om een afbeelding link te maken, combineer je de <a> tag met de <img> tag. Dit is heel eenvoudig en werkt precies op de zelfde manier als een tekst link.

<a href="http://www.codecenter.nl"><img src="images/landscape.jpg"></a>

Hyperlink met kader

Indien een afbeelding is opgenomen in een hyperlink dan plaatsen sommige browsers een rand om een afbeelding. Dit is bedoeld om bezoekers de mogelijkheid te geven om te zien dat er op de afbeelding geklikt kan worden.

<a href="http://www.codecenter.nl" target="_blank">
 <img src="images/landscape.jpg" width="250" height="156">
</a>

Hyperlink zonder kader

Voor IE 9 en oudere versies, wordt er om een afbeelding link een kader getekend. Om het kader rond de afbeelding te verbergen dien je de volgende code toe te voegen aan het img element style="border: 0;" De waarde "0" verbergt het kader van een afbeelding link.

<a href="http://www.codecenter.nl" target="_blank">
 <img src="images/landscape.jpg" width="250" height="156" style="border:0;">
</a>

Thumbnails (Miniaturen)

Een thumbnail is een verkleinde afbeelding. Een thumbnail kan worden gebruikt op je website om het dataverkeer te verminderen, doordat dan niet het afbeelding geladen hoeft te worden, maar alleen de thumbnail. Pas wanneer de bezoeker op de thumbnail klikt, wordt de afbeelding geladen in zijn ware grootte. Hierdoor wordt de afbeelding alleen weergegeven wanneer bezoekers die graag willen zien.

Fotogalerijen maken veel gebruik van thumbnails omdat de afbeelding niet direct in zijn ware grootte geladen hoeft te worden en er kunnen ook meerdere verkleinde afbeeldingen (thumbnails) op één pagina worden weergegeven. Zie het onderstaande voorbeeld:

Image maps

Een image map zorgt ervoor dat een afbeelding meerdere hyperlink gebieden kan bevatten. De afbeelding dat de image map gaat vormen wordt ingevoegd met behulp van de tag <img> net als een normale afbeelding echter komt er nu een extra attribuut <usemap> bij.

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
<title>Image map voorbeeld</title>
</head>
<body>
<p><b>Zoek en klik op de hyperlinks:</b></p>
<img src="imap/images/bmwsmall.jpg" alt="HTML Map" border="0" usemap="#html"/>
<!-- Mappen worden aangemaakt -->
<map name="html">
<area shape="rect" coords="30,140,40,170" href="voorvelg.html"/>
<area shape="rect" coords="140,142,173,198" href="achtervelg.html"/>
<area shape="rect" coords="60,93,78,105" href="spiegel.html"/>
<area shape="rect" coords="104,114,113,119" href="deurknop.html"/>
<area shape="rect" coords="262,174,286,186" href="uitlaat.html"/>
<area shape="circle" coords="317,101,6" href="embleem.html"/>
<area shape="rect" coords="357,105,369,110" href="m3logo.html"/>
<area shape="circle" coords="377,19,10" href="bmwlarge.html" target="_blank"/>
</map>
</body>
</html>

Uitproberen

Attribuutwaarden

De werkelijke waarde van coords is volledig afhankelijk van de betrokken vorm. Hier is een samenvatting, gevolgd door een aantal voorbeelden:

Rechthoek: (rect = x1 , y1 , x2 , y2)
x1 en y1 zijn de coördinaten van de linkerbovenhoek van een rechthoek, x2 en y2 zijn de coördinaten van de rechter benedenhoek.

<area shape="rect" coords="30,140,40,170" alt="Rechthoek" href="vb1.html"/>

Veelhoek: (poly = x1 , y1 , x2 , y2 , x3 , y3 ...)
Specificeert de coördinaten van de randen van een veelhoek: coords="20,20,40,40,20,60,0,40".

<area shape="poly" coords="20,20,40,40,20,60,0,40" alt="Veelhoek" href="vb2.html"/>

Cirkel: (circle = x , y , radius)
x en y zijn de coördinaten van het middelpunt en radius is de straal van een cirkel. Een cirkel met een waarde van 200,50 en een straal van 25 zal er in het attribuut coords als volgt uitzien: coords= "200,50,25"

<area shape="circle" coords="200,50,25" alt="Cirkel" href="vb3.html"/>

Alle coördinaten zijn ten opzichte van de linkerbovenhoek van een afbeelding (0,0). Je kunt een speciale hulpprogramma gebruiken om de coördinaten te bepalen. (Photoshop, IrvanView enz.)

Vorige Volgende