HTML <map> Tag

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

Bu etiket  resim haritası oluşturmak için kullanılır. Resim haritaları görüntüye tıklanabilir alanlar tanımlamak için kullanılır. <map> etiketi alanları <area> etiketi ile tanımlanmaktadır.

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 map tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
name mapname zorunludur. Resim haritasının ismini belirtmek için kullanılır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir