-

Html’de Navigation Map

Sınava çalışırken sınav konuma dahil olan Html ile ilgili yeni birşey daha öğrendim:Navigation map.
Araştırmalarım sonucunda öğrendiklerimi paylaşmak istiyorum:
<map> tagı  bir resim ya da harita üzerinde tıklanabilir alanlar oluşmasını  sağlayan bir tagdir.<map>  tagında olması gereken attribute “name”dir.<map> tagı <img> tagının “usemap” attributesi ile birlikte kullanılır.
<map> tagı ile <area> tagı yardımıyla tıklanabilir alanlar oluştururuz. Tıklanabilir alanlar tıklandığı zaman başka bir image’a yönleniyor.Harita ve image arasında bağlantı sağlanmış oluyor.
w3school.com adlı siteden bir örnekle daha ayrıntılı bir şekilde anlatmaya çalışacağım.
Elimizde 3 tane gezegen resminin olduğu bir resim var.Bu resimde 3 tane  tıklnabiir alan var:sun,mercury,venus.
Kullanıcı hangisine tıklarsa o gezegenle ilgili resme  yönleniyor.
Tıklanabilir alan oluşturulan resim(harita):

güneş
 mercur
venus

<map name=”planetmap”>
//burda yazılan name img tagınının “usemap” attributesinde kullanılacaktır
<area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm” />
<area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm” />
<area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm” />
</map>

<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap” />

Böylece hangi nesneye gidilirse onun resmi açılacaktır.

DERYA GÜNDÜZ

Category: Genel

Your email address will not be published. Required fields are marked *

*