7 Ocak 2011 Cuma

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

Hiç yorum yok:

 
Facebook

Bizi takip edin!

ESOGÜ Bilişim GünleriESOGÜ Bilişim Günleri