HTML <img> usemap-egenskap

HTML <img> etikett

Definition och användning

usemap egenskapen definierar bilden som en klientbildkarta.

Bildkarta avser en bild med klickbara områden.

usemap egenskapen är relaterad till <map>-element relaterade till name eller id-egenskapen för att skapa ett förhållande mellan <img> och <map>.

Observera:Om <img>-elementet är ett avkommande av <a> eller <button>-element, kan det inte användas usemap egenskaper.

Läs mer: Fördjupning i usemap-egenskapen

Exempel

Klickbara områden på bildkarta:

<img src="life.png" alt="Liv" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Dator" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Telefon" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Kopp kaffe" href="coffee.html">
</map>

Prova själv

Syntax

<img usemap="#mapname">

Egenskapsvärde

Värde Beskrivning
#mapname Steckproppstecknet (#) tillsammans med namnet på det <map>-element som ska användas.

Läs mer: Fördjupning i usemap-egenskapen

usemap Egenskapen tillhandahåller ett "klient"-bildmappningsmekanism som effektivt eliminerar serverns hantering av muskoordinater och de medföljande nätverksförseningarna. Genom speciala <map> och <area>-taggar kan HTML-skapare tillhandahålla en beskrivning av koordinaterna för de hyperlänksensitive områdena i usemap-bilden, denna beskrivning innehåller också motsvarande hyperlänks URL. Värdet för usemap-egenskapen är en URL som pekar på den speciella <map>-området. Browsaren på användarens dator kommer att konvertera koordinaterna för musklick på bilden till specifika beteenden, inklusive att ladda och visa ett annat dokument.

Vi ska ge ett exempel för att förklara, följande källkod kommer att mappa en 100x100 pixels bild map.gif till fyra områden. När användaren klickar på ett av dessa områden, kommer de att länkas till olika dokument.Observera att vi i detta <img>-tag har effektivt inkluderat hanteringen av ismap-bildmappning, så att användare av webbläsare som inte har usemap-handlingsfunktion kan hantera bildmappning genom ett annat sätt, nämligen servermekanismen för att hantera bildmappning:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Skillnaden i tillämpningen av ismap- och usemap-attributen

Kartor är ett bra exempel på användning av ismap- och usemap-attributen, till exempel när man surfar på en webbsida för ett stort företag över hela landet, kan användaren klicka på den stad där de bor på kartan för att få adresser och telefonnummer till närliggande detaljhandelsbutiker.

Fördelarna med att använda usemap-klienten för att hantera bildkartor är att det inte krävs en server eller specialserverprogramvara, i motsats till ismap-mekanismen, kan det användas i icke-webb-miljöer (utan nätverk), till exempel att använda lokala filer eller CD-ROM.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd

HTML <img> etikett