HTML <img> usemap-egenskab

HTML <img> tag

Definition og brug

usemap egenskab definerer billedet som en klientbaseret billedkort.

Billedkort refererer til billeder med klikbare områder.

usemap egenskaber er forbundet med <map>-elementet navn eller id-egenskaber forbundet for at etablere forbindelse mellem <img> og <map>.

Bemærk:Kan ikke bruges, hvis <img>-elementet er et efterkommer af <a> eller <button>-elementet. usemap egenskaber.

Udforsk mere: Forklaring af usemap-attributten

Eksempel

Kort med klikbare områder:

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

Prøv det selv

Syntaks

<img usemap="#mapname">

Attributværdi

Værdi Beskrivelse
#mapname En skråstreg (#) plus navnet på det <map>-element, der skal bruges.

Udforsk mere: Forklaring af usemap-attributten

usemap Egenskaberne tilbyder et "klient-side" billedkortmekanisme, som effektivt eliminerer serverens håndtering af musekoordinater og de dermed opståede netværksforsinkelser. Gennem specielle <map> og <area>-tags kan HTML-creatoren levere en beskrivelse af koordinaterne for de hyperlinksensitive områder i usemap-billedet, som også inkluderer de tilsvarende hyperlinks URL'er. Værdien af usemap-attributten er en URL, der peger på den specielle <map>-område. Browseren på brugerens computer vil konvertere museklikkoordinaterne til specifikke handlinger, herunder at indlæse og vise et andet dokument.

Vi skal give et eksempel på dette, nedenstående kildekode mapper et 100x100 pixels billede map.gif til fire områder, og når brugeren klikker på et af disse områder, vil de blive linket til forskellige dokumenter. Bemærk, at vi i dette <img>-tag effektivt har inkluderet håndteringen af ismap-billedkort, så brugere af browsere, der ikke har usemap-håndteringsfunktionen, kan håndtere billedkort gennem en anden mekanisme, nemlig server-side mekanisme:

<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>

Forskellen i anvendelse af ismap- og usemap-attributter

Kort er et godt eksempel på anvendelse af ismap- og usemap-attributter, f.eks. når man surfer på en stor virksomheds webside over hele landet, kan brugeren klikke på deres egen by på kortet for at få adresser og telefonnumre til butikker i nærheden osv.

Fordelene ved at bruge usemap til klientbehandling af billedkort er, at det ikke kræver server eller speciel serversoftware, i modsætning til ismap-mekanismen, kan det bruges i ikke-web (uden internet) miljøer, f.eks. i lokale filer eller på CD-ROM.

Browserstøtte

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <img> tag