Handleiding HTML - Afbeeldingen - Tooltips voor image maps

HTML		Afbeeldingen

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Gerelateerde elementen: AREA | IMG | MAP

Tooltips voor image maps

Je kunt ervoor kiezen dat een tooltip (een klein venster met extra informatie) wordt weergegeven, als de muisaanwijzer boven een aanklikbaar gebied van een image map komt. Sommige browsers (Microsoft Internet Explorer 5.0 en hoger en Netscape Navigator 4) doen dat al automatisch en laten daarbij de waarde van het ALT attribuut van het AREA element zien. Bij andere browsers (Microsoft Internet Explorer 4.0, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 6.0 en hoger) moet je het daarvoor bedoelde TITLE attribuut opnemen, als je de tooltip wilt zien. Het TITLE attribuut is in tegenstelling tot het ALT attribuut speciaal bedoeld voor het geven van extra informatie. Het wordt ook ondersteund door Microsoft Internet Explorer 5.0 en hoger, alleen niet op de juiste wijze. Het probleem is dat deze browser bij het gecombineerde gebruik van de attributen ALT en TITLE (en dat is nodig, omdat ALT een vereist attribuut is) niet de waarde van het TITLE attribuut als tooltip weergeeft, maar de waarde van het ALT attribuut. In de praktijk is het daarom verstandig voor beide attributen eenzelfde waarde te kiezen, die én duidelijk is als omschrijving van de bestemming van het gebied (voor als de browser de afbeelding niet kan of mag weergeven) én logisch als extra informatie in de tooltip.

In het volgende voorbeeld hebben de attributen ALT en TITLE verschillende waarden en is bovendien de naam van het attribuut erin opgenomen. Je kunt daardoor zien welk attribuut in de gebruikte browser de weergave van de tooltip bepaalt.

<IMG SRC="vormen.gif" ALT="Vormen" WIDTH="300" HEIGHT="150" BORDER="1" USEMAP="#vormen"> <MAP NAME="vormen"> <AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map4a.html" ALT="Rechthoek - ALT" TITLE="Rechthoek - TITLE"> <AREA SHAPE="circle" COORDS="254,61,33" HREF="map4b.html" ALT="Cirkel - ALT" TITLE="Cirkel - TITLE"> <AREA SHAPE="poly" COORDS="102,134,120,75,197,84,208,129,164,143" HREF="map4c.html" ALT="Veelhoek - ALT" TITLE="Veelhoek - TITLE"> </MAP>

Onder is de weergave door de browser en daarin kun je controleren of deze het TITLE correct ondersteunt. Boven is een schermafdruk van de bedoelde weergave.

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin