Websites met stijl

Naslag: usemap, map, area

Hot spots

Hot spots zijn aanklikbare gebieden in een afbeelding.

Area

Het (lege) element area definieert een hot spot.
Het element heeft de attributen shape (verplicht; met de waarde circle - cirkel, rect - rechthoek, poly - veelhoek), coords (verplicht met de coordinaten van de hot spot), href (niet verplicht - met de link), en eventueel title (met tooltip).
Er zijn drie vormen: vorm 1: een cirkel area shape="circle" coords="x_middelpunt, y_middelpunt, straal" href="url" title="tooltip" > href geeft de bestemming van de link

vorm 2: een rechthoek area shape="rect" coords="x₁, y₁, x₂, y₂" href="url" title="tooltip" > x₁, y₁ is de linkerbovenhoek, x₂, y₂ is de rechteronderhoek,

vorm 3: een veelhoek area shape="poly" coords="x₁, y₁, x₂, y₂....x_n, y_n" href="url" title="tooltip" > x₁, y₁, x₂, y₂...x_n, y_n zijn de coördinaten van de achtereenvolgende hoekpunten (zoveel als je wilt).

Map

Het element map bevat één of meer hot spots (elementen area). Vorm: map element <map name="naam"> area shape="vorm" coords="coördinaten" href="url" title="tooltip" >
area shape="vorm" coords="coördinaten" href="url" title="tooltip" >
area shape="vorm" coords="coördinaten" href="url" title="tooltip" >
</map> Name is de naam waarmee het element kan worden aangeroepen

Het element map kan overal in de html staan, bijvoorbeeld voor of achter de afbeelding met de hot spots (usemap), aan het begin of het eind van het element body of zelfs in head

Usemap

Een afbeelding met hot spots wordt aangeroepen met het attribuut usemap <img src=URL van afbeeldingsbestand usemap="#mapnaam"> Usemap verwijst naar de naam van het element map met de hot spots.

Voorbeeld

figuur 1 - een afbeelding met ingetekende hot spots Figuur 1 toont drie hot spots: een rode cirkel, een gele rechthoek en een blauwe veelhoek.
(Hot spots zijn niet zichtbaar, in deze figuur zijn de gekleurde vormen ingetekend.) figuur 2 - de code voor de hot spots uit figuur 1 <img src=img/astronauten.jpg usemap="#astronauten">

<map name="astronauten"> <area shape="circle" coords="98,195,78" href="armstrong.html"
title="Neil Armstrong - klik voor meer info" >
<area shape="rect" coords="159, 54, 254, 329" href="collins.html"
title="Mike Collins - klik voor meer info" >
<area shape="poly" coords="290,113,315,111,380,205,355,329,259,329,259,192" href="aldrin.html"
title="Buss Aldrin - klik voor meer info" >
</map>

• Usemap="#astronauten" verwijst naar de map met de naam "astronauten".
  Het teken # geeft aan dat het eigenlijk om een id-naam gaat.
• De cirkel heeft als middelpunt 98, 195 (98px van links, 195px van boven). De straal is 78px.
• De rechthoek (rect) heeft een linkerbovenhoek op 159, 54 en een rechteronderhoek op 254, 329.
• De veelhoek (poly) heeft de coördinaten 290, 113; 315, 111;...259,192 (steeds achtereenvolgens het aantal pixels van links en van boven).
• Zie cursus35.html voor een uitgebreide behandeling van hot spots.

Gebruik

Enkele voorbeelden:

• Hot spots kunnen onder andere worden gebruikt als menu. Delen van een afbeelding kunnen zijn aanklikbaar. Bij klikken wordt dan een webpagina geopend.
• Een groepsfoto met hot spots voor de verschillende personen. De tooltips van elke hot spot bevat de naam van de aangewezen persoon. Er is dan geen href, tenzij je wilt doorverwijzen naar een webpagina over die persoon.

Beperking

• Als de afmetingen van een afbeelding veranderen, veranderen de coördinaten van de hot spots niet mee.
  Hot spots zijn daarom alleen te gebruiken bij afbeelingen met vaste afmetingen. Dat geeft beperkingen bij responsive design.