Örnek
<img src="http://lorempixel.com/output/cats-q-c-300-300-9.jpg" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Sun"> <area shape="circle" coords="90,58,3" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Mercury"> <area shape="circle" coords="124,58,8" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Venus"> </map>
Resmin üzerinde belirli bir alanı seçmek için kullanılır. Bu etiket sadece <map> elementi içinde kullanılırsa geçerli olur.
Codepen Ön izleme
<img src="http://lorempixel.com/output/cats-q-c-300-300-9.jpg" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Sun">
<area shape="circle" coords="90,58,3" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Mercury">
<area shape="circle" coords="124,58,8" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Venus">
</map>See the Pen HTML area Tag by W3TR (@w3tr) on CodePen.
Nitelikler
| Nitelik | Değer | Açıklama |
|---|---|---|
| alt | text | Alan için alternatif bir isim belirlemek için kullanılır. Href özelliğinin olması gerekir. |
| coords | coordinates | Alanın koordinatlarını belirlemek için kullanılır. |
| download | filename | Kullanıcı bağlantıya tıkladığında belirlediğimiz hedef deki dosyayı yüklemek için kullanılır. |
| href | URL | Bağlantı oluşturmak için kullanılır. |
| hreflang | language_code | Oluşturduğumuz bağlantının URL dilini belirlemek için kullanılır. |
| media | media query | |
| nohref | value | HTML5 tarafından desteklenmiyorHerhangi bir alanla ilgili bir bağlantı olmadığını belirtmek için kullanılır. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Bulunduğumuz sayfayla bağlantı oluşturduğumuz sayfa arasındaki ilişkiyi bitirmek için kullanılır. |
| shape | default rect circle poly |
Resim haritasında kullanacağımız şekli belirtmek için kullanılır |
| shape | default rect circle poly |
Resim haritasında kullanacağımız şekli belirtmek için kullanılır |
| target | _blank _parent _self _top framename |
Bağlantı oluşturulan sayfanın nerede açılacağını belirtir. |
| type | media_type | Bağlantı oluşturulan sayfanın MIME tipini belirlemek için kullanılır. |