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:

driehoek, vierkant, cirkelafbeelding

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:

demonstratie van afbeeldingskaart en cursor



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow