Atrybut usemap elementu HTML <img>

Tag HTML <img>

Definicja i użycie

usemap Atrybut definiuje obraz jako mapowanie klienta.

Mapowanie obrazu to obraz z obszarem klikalnym.

usemap Atrybuty są związane z Element <map>. powiązane z atrybutem name lub id, aby utworzyć relację między <img> a <map>.

Uwaga:Nie można używać, jeśli element <img> jest potomkiem elementu <a> lub <button>. usemap Atrybuty.

Przeczytaj więcej: Szczegółowy opis atrybutu usemap

Przykład

Obraz mapujący obszar klikalny:

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

Spróbuj sam

Gramatyka

<img usemap="#mapname">

Wartość atrybutu

Wartość Opis
#mapname Znak numeru (#) dodać nazwę elementu <map>.

Przeczytaj więcej: Szczegółowy opis atrybutu usemap

usemap Atrybuty zapewniają mechanizm mapowania obrazu "klienta", który efektywnie eliminuje przetwarzanie kursora myszy na serwerze oraz związane z tym opóźnienia sieci. Dzięki specjalnym tagom <map> i <area> twórca HTML może dostarczyć mapowanie, które opisuje współrzędne obszarów wrażliwych na linki w obrazie usemap, które zawierają odpowiednie adresy URL linków. Wartość atrybutu usemap to URL, który wskazuje na specjalny obszar <map>. Przeglądarka na komputerze użytkownika przekształca współrzędne kliknięcia myszy na określone działania, w tym załadowanie i wyświetlenie innego dokumentu.

Przykładowo wyjaśnimy, poniższy kod źródłowy mapuje obraz 100x100 pikseli map.gif na cztery obszary, do których użytkownik jest przekierowywany po kliknięciu na jeden z nich. Proszę zauważyć, że w tagu <img> efektywnie zawarliśmy obsługę mapowania obrazu ismap, co pozwala użytkownikom przeglądającym przeglądarki bez obsługi usemap na przetwarzanie mapowania obrazu poprzez inny sposób, tj. mechanizm serwerowy:

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

Różnice w zastosowaniu atrybutów ismap i usemap

Mapa jest dobrym przykładem zastosowania atrybutów ismap i usemap, np. podczas przeglądania strony internetowej dużej firmy na całym kraju, użytkownik może kliknąć miasto, w którym mieszka, aby uzyskać adresy i numery telefonów lokalnych sklepów detalicznych i innych.

Zaletą klienta usemap do map jest to, że nie wymaga serwera ani specjalnego oprogramowania serwerowego, w przeciwieństwie do mechanizmu ismap, można go używać w środowiskach poza webem (bez sieci), np. w lokalnych plikach lub na CD-ROM.

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

Tag HTML <img>