HTML
Bildkartor
Sök…
Syntax
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
parametrar
| Tagg / Attribut | Värde |
|---|---|
<img> | Nedan visas de bildkartspecifika attribut som ska användas med <img> . Vanliga <img> -attribut gäller. |
usemap | Kartans name med en hashsymbol förberedd på den. Till exempel, för en karta med name="map" , bör bilden ha usemap="#map" . |
<map> | |
name | Namnet på kartan för att identifiera den. Används med bildens usemap attribut. |
<area> | Nedan finns <area> -specifika attribut. När href anges, vilket gör <area> en länk, stöder <area> också alla attributen för ankar taggen ( <a> ) förutom ping . Se dem på MDN-dokumenten . |
alt | Den alternativa texten som ska visas om bilder inte stöds. Detta är endast nödvändigt om href är inställt på <area> . |
coords | Koordinaterna som beskriver det valda området. När shape="polygon" bör detta ställas in på en lista med "x, y" -par separerade med komma (dvs. shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). När shape="rectangle" bör detta ställas in till left, top, right, bottom . När shape="circle" bör detta ställas in på centerX, centerY, radius . |
href | URL: en för hyperlänken, om den anges. Om det utelämnas kommer <area> inte att representera en hyperlänk. |
shape | Formen på <area> . Kan ställas in på default för att välja hela bilden (inga coords attribut behövs), circle eller circ för en cirkel, rectangle eller rect för en rektangel, och polygon eller poly en polygonal område som anges av hörnpunkter. |
Anmärkningar
Ovanstående parameterlista ändras från MDN-dokumenten:
<map>och<area>.Det är möjligt att skapa en bildkarts koordinater med för en bild med enklare former (som i det inledande exemplet ovan) med en bildredigerare som visar koordinater (som GIMP). Men det kan vara lättare i allmänhet att använda en bildkartgenerator, som den här .
Introduktion till bildkartor
Beskrivning
En bildkarta är en bild med klickbara områden som vanligtvis fungerar som hyperlänkar.
Bilden definieras av <img> -taggen och kartan definieras av en <map> -tagg med <area> -taggar för att beteckna varje klickbart område. Använd usemap och name att binda bilden och kartan.
Grundläggande exempel
Så här skapar du en bildkarta så att alla former i bilden nedan kan klickas:
Koden skulle vara följande:
<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>
Du bör se att webbläsaren känner igen områdena när markören blir en pekare. Se en live-demo på JSFiddle, eller se en demonstration nedan:
