Tagarchief: html

Maak een deel van een afbeelding aanklikbaar.

gimp

Ga met je muis over de afbeelding, de letter A. Je ziet de cursor veranderen. Een deel van de afbeelding is aanklikbaar.
Om de letter aan aanklikbaar te maken, zoals in deze afbeelding:
Open de afbeelding in GIMP (een open source programma om afbeeldingen te bewerken)

Gimp geeft het punt van de afbeelding links boven de coordinaten 0,0. (groene pijl)
Je maakt die coordinaten zichtbaar door met de muis op een punt te gaan staan. Links onder het scherm van GIMP, in de onderste balk verschijnen de coordinaten van het punt waar de muis is. (rode pijl)
Om te weten wat de coordinaten van het aanklikbare gedeelte van de afbeelding zijn ga je er met de muis staan en lees de coordinaten bij de rode pijl Noteer die coordinaten.  Je hebt twee coordinaten nodig. Het punt links boven van het aankikbare deel en het punt rechtsonder.

De html gaat er zo uitzien:

<img src="lettergrid.jpg"width="600" height="500" alt="lettergrid" usemap="#lettermap">
<map name="lettermap">
 <area shape="rect" coords="73,104,145,177" title="A" href="piks/aap.jpg">
 </map>

De eerste regel is de afbeelding, let op de  tag usemap.
De tweede regel opent de map van de afbeelding.
De derde regel noemt de coordinaten van het aankilkbare deel
De vierde regel sluit de map weer af.

Bij de tag coords is het eerste paar cijfers de linker bovenhoek, en het tweede paar cijfers de rechter onderhoek.
Het eerste cijfer geeft de afstand vanaf de linker rand van de afbeelding. Het tweede cijfer geeft de afstand vanaf de bovenrand van de afbeelding. De afstanden worden gemeten in pixels.