HTML Afbeeldingen

HTML <img> usemap attribuut

  • Het usemap attribuut specificeert een verwijzing naar een via het <map> element gedefinieerde "map", waarin de bij de afbeelding behorende gegevens (de vorm en coördinaten van de gebieden en de bijbehorende bestemmingen) gevonden kunnen worden.
  • Het usemap attribuut wordt gebruikt wanneer de afbeelding een "client-side image map" is, ofwel een aanklikbare afbeelding waarvan de werking gecontroleerd wordt door de browser (de client).
  • De aanklikbare afbeelding is opgedeeld in verschillende gebieden (areas), waarbij aan elk gebied een bestemming is gekoppeld.
  • Het gebruik van client-side image maps heeft de voorkeur boven het gebruik van server-side image maps.

Attribuut voorbeeld (aanklikbaar)

<html>
<body>

<img src="map-figuren" title="meetkundige figuren" height="300" width="300" border="0" usemap="#map-figuren">
<map id="map-figuren" name="meetkundige figuren" >
<area shape="rect" coords="A, B, C, D" href="vierkant.gif" alt="rechthoek" title="rechthoek" target="_blank" />
<area shape="circle" coords="a, b, r" href="cirkel.gif" alt="cirkel" title="cirkel" target="_blank" />
<area shape="poly" coords="a,b,c,d,e,f" href="driehoek.gif" alt="driehoek" title="driehoek" target="_blank" />
</map>
</body>
</html>
meetkundige figuren rechthoek cirkel driehoek

Verschil HTML - XHTML

Het img element moet correct worden afgesloten in XHTML.

naar boven 

nota

Ook tekst-georiënteerde browsers kunnen hiervan gebruik maken.

  •  De gebruiker kan direct zien of hij/zij over een actief gebied gaat.
  •  Nog een voordeel van client-side image maps is dat je niet afhankelijk bent van de beschikbaarheid van een cgi-script op de server.

Attribuut waarde

Waarde Beschrijving
#mapnaam Een hekje ("#") plus de naam of het id van het <map> element.

Opbouw

<img usemap="#mapnaam"> In HTML
<img usemap="#mapnaam" /> In XHTML

Browser ondersteuning

Internet Explorer Firefox Chrome Opera Safari

  • Het <img> usemap attribuut wordt ondersteunt in de bekende browsers.
naar boven terug naar afbeeldingen naar boven
terug naar afbeeldingen naar boven