Een eerste image map
Laten we daarom beginnen met een plaatje. Ik heb er al eentje voor jullie uitgezocht:
Het is het handigst als jullie ook dit plaatje nemen, zodat je mee kan doen. Sla allereerst dit plaatje op op je harde schijf. Dan plaats je in dezelfde map deze code:
<html> <head> <title>Mijn eerste image map!</title> </head> <body> <map name="naam"> <area shape="rect" coords="70,20,195,55" href="#"> <area shape="circle" coords="315,33,20" href="#"> <area shape="poly" coords="70,60,360,75,50,80,10,50" href="#"> </map> </body> </html>
Nu hebben we de map, of kaart. Laat ik even uitleggen wat alles betekent:
<map>. Dit is de tag voor een map.
name="naam". Met dit attribuut moet je de naam opgeven van de imagemap. Deze map kun je namelijk oproepen voor elk plaatje. Daarover straks meer.
<area>. Met deze tag leg je uit dat er een area, of gebiedje aankomt.
shape="waarde". Met het shape attribuut moet je de vorm van je area definiëeren. Mogelijke waarden zijn "rect" voor een rechthoek, "circle" voor een cirkel, en "poly", voor een polygoon. Een polygoon is een vorm waarvan de vorm niet vaststaat. (Een driehoek bijvoorbeeld)
coords="waarden". Het belangrijkste attribuut. Hiermee bepaal je de punten van de vorm. Bij een "rect" (rectangle of rechthoek), moet je 2 punten noteren. Het punt in de linkerbovenhoek en in de rechteronderhoek. Bij een cirlce moet je de coordinaten van het gewenste middelpunt, en daarachter de straal in pixels noteren. Bij een polygoon, noteer je achtereenvolgens alle punten, gescheiden door komma's. De browser weet dan vanzelf dat het om de beurt om x en y coordinaten gaat.
href="url.html". Met dit attribuut bepaal je waar het gebied naartoe moet linken. In het voorbeeld staat #, zodat je op dezelfde pagina blijft, maar dit moet een url worden, of alleen het path.
Map koppelen aan een plaatje
Nu hebben we wel een map, maar de browser weet niet om welk plaatje het gaat. Plaats daarom deze code onder de </map>:
<img src="header.jpg" usemap="#naam">
Nu heb je dus opgegeven met het usemap attribuut, dat dit plaatje moet gaan "samenwerken" met een map die die naam "naam" heeft. Nu sla je dit op en bekijk het resultaat. Alles zou moeten werken. Je krijgt alleen wel een lelijke blauwe rand om je plaatje. Voeg daarom aan de img tag, border="0" toe. Nu word de volledige code dus:
<html> <head> <title>Mijn eerste image map!</title> </head> <body> <map name="naam"> <area shape="rect" coords="70,20,195,55" href="#"> <area shape="circle" coords="315,33,20" href="#"> <area shape="poly" coords="70,60,360,75,50,80,10,50" href="#"> </map> <img src="header.jpg" usemap="#naam" border="0"> </body> </html>
Natuurlijk kan een voorbeeld niet uitblijven:
De links zitten onder de tekst, om "web" heen en de p is een link. Ze linken naar niets, maar daarom is het ook een voorbeeld!
Nu kun je dus een imagemap maken. Je kunt de coördinaten trouwens zelf chekken in bijvoorbeeld Paint. Je zal dan rechtsonder in beeld zien op welke coördinaten je bent. Met deze tip sluit ik deze les af!