HTML <img> usemap eigenschap

HTML <img> tag

Definitie en gebruik

usemap Eigenschappen definiëren de afbeelding als een clientse afbeeldingskaart.

Een afbeeldingskaart verwijst naar een afbeelding met klikbare gebieden.

usemap Eigenschappen zijn <map> element De name of id eigenschappen zijn geassocieerd om een relatie tussen <img> en <map> te vestigen.

Let op:Als het <img> element een nakomeling is van een <a> of <button> element, kan het niet worden gebruikt usemap Eigenschappen.

Verder lezen: Uitleg van het usemap-eigenschap

Voorbeeld

Afbeelding met klikbare gebieden:

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

Probeer het zelf uit

Syntaxis

<img usemap="#mapname">

Eigenschapswaarde

Waarde Beschrijving
#mapname Het teken hashtag (#) plus de naam van het te gebruiken <map>-element.

Verder lezen: Uitleg van het usemap-eigenschap

usemap De eigenschap biedt een "client-side" afbeeldingskaartmechanisme, wat effectief de verwerking van muiscoördinaten op de server elimineert, en daardoor de problemen met netwerkvertragingen oplost. Door speciale <map> en <area>-tags kunnen HTML-makers een beschrijving van de coördinaten van de hyperlinkgevoelige gebieden in de usemap-afbeelding bieden, die ook de bijbehorende hyperlink-URL bevat. De waarde van het usemap-eigenschap is een URL die verwijst naar een speciale <map>-gebied. De browser op de gebruikerscomputer zal de coördinaten van de muisklik op het beeld omzetten naar specifieke acties, waaronder het laden en weergeven van een ander document.

Laten we een voorbeeld geven. Hieronder wordt een 100x100 pixels beeld map.gif gemapt naar vier gebieden. Wanneer de gebruiker op een van deze gebieden klikt, wordt hij doorgestuurd naar een andere document. Let op, in deze <img>-tag hebben we effectief de verwerking van de ismap-afbeeldingskaart geïntegreerd, zodat gebruikers van browsers zonder usemap-verwerkingsfunctie deze afbeeldingskaart kunnen verwerken via een andere manier, namelijk een servermatige mechanisme:

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

Differences in the application of ismap attribute and usemap attribute

Maps are a good example of the application of ismap and usemap attributes, for example, when browsing the website of a large company nationwide, users may click on the city where they live on the map to obtain the addresses and phone numbers of nearby retail stores, etc.

The benefits of using the usemap client-side image mapping are that it does not require a server or special server software, unlike the ismap mechanism, it can be used in non-web (no network) environments, such as using local files or CD-ROMs.

Browser support

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

HTML <img> tag