HTML <img> usemap özelliği

HTML <img> etiketi

Tanım ve Kullanım

usemap özellikleri, görseli istemci görsel haritalaması olarak tanımlar.

Görsel haritalama, tıklanabilir alanlar içeren görsellerdir.

usemap özellikleri <map> ögesi name veya id özellikleri ile ilişkilendirilmiş, <img> ile <map> arasındaki ilişkiyi kurmak için.

Dikkat:Eğer <img> ögesi <a> veya <button> ögesinin soyuysa, kullanılamaz usemap Özellik.

Genişletilmiş Okuma: usemap özelliği hakkında ayrıntılı bilgi

Örnek

Tıklanabilir alanlı görsel haritalama:

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

Kendi kendine deneyin

Sözdizimi

<img usemap="#mapname">

Özellik değeri

Değer Açıklama
#mapname Aşırı karakteri ("#") ve kullanılacak <map> öğesinin adını ekleyin.

Genişletilmiş Okuma: usemap özelliği hakkında ayrıntılı bilgi

usemap Özellik, bir "istemci" görüntü haritalama mekanizması sunar ve sunucu tarafında fare koordinatlarının işlenmesini ve bu nedenle ağ gecikmeleri sorununu etkili bir şekilde ortadan kaldırır. Özel <map> ve <area> etiketleri aracılığıyla, HTML yaratıcıları, usemap görüntüsündeki bağlantılı alanların koordinatlarını tanımlayan ve bu koordinatlarla ilgili bağlantılı URL'leri içeren bir haritalama sağlayabilirler, bu haritalama aynı zamanda bağlantılı URL'leri de içerir. usemap özelliğinin değeri, özel <map> alanına işaret eden bir URL'dir. Kullanıcı bilgisayarındaki tarayıcı, görüntü üzerinde fare tıklama koordinatlarını belirli bir eyleme dönüştürür, bu eylemler arasında başka bir belgenin yüklenmesi ve gösterilmesi yer alır.

Örnek olarak açıklamamızı yapalım, aşağıdaki kaynak kodu 100x100 piksellik bir map.gif görüntüsünü 4 bölgeye haritalar, kullanıcı herhangi bir bölgeyi tıkladığında farklı belgelere yönlendirilir. Lütfen dikkat edin, bu <img> etiketinde, ismap görüntü haritalaması işlevini içeren etkili bir işlev içeriyoruz, bu nedenle usemap işlevi olmayan tarayıcı kullanıcıları, yedek bir yol olarak sunucu tarafı mekanizması yoluyla görüntü haritalamasını işlemek için başka bir yol kullanabilirler:

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

ismap ve usemap özelliklerinin kullanımındaki farklar

Map, ismap ve usemap özelliklerinin kullanımındaki farklar, örneğin, bir ulusal çapta büyük bir şirket web sayfasını ziyaret ederken, kullanıcıların yaşadıkları şehirleri haritada tıklayarak yakınlardaki perakende mağazalarının adresleri ve telefon numaraları gibi bilgiler elde edebilecekleri bir örnek olarak gösterilebilir.

usemap, ismap mekanizmasından farklı olarak, client-side image mapping'in avantajı, sunucu veya özel sunucu yazılımı gerektirmemesidir. Ayrıca, web (ağ) olmayan (ağsız) ortamlarda kullanılabilir, örneğin yerel dosyalar veya CD-ROM'lar üzerinde kullanılabilir.

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek

HTML <img> etiketi