HTML
Afbeelding kaarten
Zoeken…
Syntaxis
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
parameters
| Tag / Attribute | Waarde |
|---|---|
<img> | Hieronder staan de beeldspecifieke attributen die u kunt gebruiken met <img> . Reguliere <img> attributen zijn van toepassing. |
usemap | De name van de kaart met een hash-symbool eraan toegevoegd. Voor een kaart met name="map" moet de afbeelding bijvoorbeeld usemap="#map" . |
<map> | |
name | De naam van de kaart om deze te identificeren. Te gebruiken met het usemap kenmerk van de afbeelding. |
<area> | Hieronder staan <area> -specifieke attributen. Wanneer href is opgegeven, waardoor <area> een link wordt, ondersteunt <area> ook alle attributen van de ankertag ( <a> ) behalve ping . Bekijk ze op de MDN-documenten . |
alt | De alternatieve tekst die wordt weergegeven als afbeeldingen niet worden ondersteund. Dit is alleen nodig als href ook is ingesteld op het <area> . |
coords | De coördinaten die het selecteerbare gebied schetsen. Wanneer shape="polygon" , moet dit worden ingesteld op een lijst van "x, y shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." gescheiden door komma's (dat wil zeggen shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Wanneer shape="rectangle" , moet dit worden ingesteld op left, top, right, bottom . Wanneer shape="circle" , moet dit worden ingesteld op centerX, centerY, radius . |
href | De URL van de hyperlink, indien opgegeven. Als het wordt weggelaten, vertegenwoordigt het <area> geen hyperlink. |
shape | De vorm van het <area> . Kan worden ingesteld op default op de hele afbeelding (geen selecteren coords noodzakelijk attribuut), circle of circ voor een cirkel, rectangle of rect voor een rechthoek en polygon of poly voor een veelhoekig gebied dat gespecificeerd wordt hoekpunten. |
Opmerkingen
De bovenstaande lijst met parameters is gewijzigd vanuit de MDN-documenten:
<map>en<area>.Het is mogelijk om de coördinaten van een afbeeldingskaart te maken met voor een afbeelding met eenvoudigere vormen (zoals in het inleidende voorbeeld hierboven) met een afbeeldingseditor die coördinaten weergeeft (zoals GIMP). In het algemeen kan het echter eenvoudiger zijn om een afbeeldingmapgenerator, zoals deze, te gebruiken .
Inleiding tot afbeeldingenkaarten
Beschrijving
Een afbeelding is een afbeelding met klikbare gebieden die meestal als hyperlinks fungeren.
De afbeelding wordt gedefinieerd door de tag <img> en de kaart wordt gedefinieerd door een tag <map> met tags <area> om elk klikbaar gebied aan te duiden. Gebruik de usemap en name om de afbeelding en de kaart te binden.
Basis voorbeeld
Om een afbeeldingskaart te maken zodat elk van de vormen in de onderstaande afbeelding klikbaar is:
De code zou als volgt zijn:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
Je zou moeten zien dat de browser de gebieden herkent wanneer de cursor een aanwijzer wordt. Bekijk een live demo op JSFiddle, of bekijk hieronder een demonstratie:
