HTML Afbeeldingen

HTML <map> element

  • Het <map> element definieert een client-side imagemap.
  • Met een imagemap kan je ervoor zorgen dat op één figuur/afbeelding meerdere aanklikbare gebieden gedefinieerd worden.
  • Client-side imagemaps zijn aanklikbare afbeeldingen waarbij het afhandelen van de plaats waar de gebruiker klikte en de daarmee gekoppeld hyperlink door de browser gebeuren.
  • Om aan te geven dat je op een afbeelding een imagemap wenst toe te passen gebruik je het usemap attribuut in het <img> element. Dit attribuut bevat de naam van de te gebruiken map, voorafgegaan door een hekje (#).
  • De naam van de map leg je vast in het name attribuut van de map-tag. Binnen dit map-element maak je een patroon dat de aanklikbare gebieden aangeeft die op de figuur worden toegepast.
  • Je definieert de aanklikbare gebieden met de <area>-tag.
tip

Het <map> element, bevat een aantal <area> elementen die de aanklikbare zones in de afbeeldingmap definiëren !

Voorbeeld

<map name="voorbeeldmap">
<area shape="rect" coords="x,y,x,y," href="voorbeeld.htm" alt="voorbeeld" />
</map>

voorbeeld van een aanklikbaar plaatje

ten huize van sir joshua reynolds Dr Johnson - schrijver Boswell - schrijver Sir Joshua Reynolds - schilder en gastheer David Garrick - acteur Edmund Burke - politicus Pasqual Paoli - Corsicaans patriot Charles Burney - muziekhistoricus Thomas Warton - dichter Oliver Goldsmith - schrijver waarschijnlijk The Infant Academy 1782 bediende - mogelijk Francis Barber

naar boven 

Vereist attribuut

Element Waarde Beschrijving DTD
name mapnaam Specificeert de naam van een image-map (afbeeldingenmap). STF

Verschil HTML - XHTML

In XHTML is het name attribuut verouderd en moet worden vervangen door het id attribuut !

naar boven 

tip

Wees zuinig met het plaatsen van afbeeldingen op één pagina, het laden van een afbeelding heeft tijd nodig en kan het tonen van een pagina ernstig vertragen !

DTD geeft aan in welk <!DOCTYPE> van HTML 4.01 / XHTML 1.0DTD het attribuut is toegestaan.
S=Strict, T=Transitional, F=Frameset

Standaard attributen

  • Het <map> element ondersteunt volgende standaard attributen:
Attribuut Waarde Beschrijving DTD
class klassenaam Specificeert een klassenaam voor een element STF
dir ltr
rtl		 Specificeert de tekst richting van de inhoud van een element STF
id id Specificeert een uniek id voor een element STF
lang taalcode Specificeert de taalcode van de inhoud van een element STF
style stijl definitie Specificeert de inline stijl van een element STF
title tekst Specificeert extra informatie over een element STF
xml:lang taalcode Specificeert de taalcode van de inhoud van een element, in een XHTML document STF

naar boven 

Gebeurtenis attributen

  • Het <map> element ondersteunt volgende gebeurtenis attributen:
Attribuut Waarde Beschrijving DTD
onclick script Script moet worden uitgevoerd op een muisklik STF
ondblclick script Script moet worden uitgevoerd op een dubbelklik STF
onmousedown script Script dat moet worden uitgevoerd wanneer de muis wordt ingedrukt STF
onmouseover script Script dat moet worden uitgevoerd wanneer de muisaanwijzer beweegt over een element STF
onmouseup script Script dat moet worden uitgevoerd wanneer muisknop wordt losgelaten STF
onmouseout script Script dat moet worden uitgevoerd wanneer de muisaanwijzer beweegt uit van een element STF
onmousemove script Script dat moet worden uitgevoerd wanneer de muisaanwijzer beweegt STF
onkeydown script Script dat moet worden uitgevoerd wanneer u een toets indrukt STF
onkeypress script Script dat moet worden uitgevoerd wanneer een toets wordt ingedrukt en losgelaten STF
onkeyup script Script dat moet worden uitgevoerd wanneer een toets wordt losgelaten STF

Browser ondersteuning

Internet Explorer Firefox Chrome Opera Safari

  • Het HTML <map> element wordt ondersteunt door de bekende browsers.
naar boven naar boven naar area element
naar boven naar het area element