27 Haziran 2011 Pazartesi

İmage Map (Resim Haritaları)

Resimlerin üzerindeki bir yada birden fazla noktaya link eklenmesi gerektiği durumlarda Image Map özelliği kullanılır. Image Map, sayfada yer alan bir resmin üzerinde belirlenen bir yada birden çok bölgelerdeki noktalara link ekleme işlemidir.
Coords=”X1, Y1, X2, Y2,......., Xn, Yn”:
Parametre, bağlantının metin üzerinden değil, bir grafik üzerinde oluşturulması halinde, resmin hangi koordinatları arası tıklanırsa, bağlantının sağlanacağını gösterir. Coords tagı, Shape(şekil,tip)  parametresi ile birlikte kullanılır.
Shape=(rect/circle/poly):
Parametre ve parametreye bağlı olarak ifade ile, tarayıcıya bir grafik unsurun üzerine konmuş bağlantı noktasının biçimini tanımlar.
Rect şeklin dörtgen, circle daire, poly çok kenarlı ve default ise tarayıcının varsayılan bağlantı şekli olduğunu ifade eder. Bu parametre Coords parametresi ile birlikte kullanılır. Bu durumda Coords değerleri “X1, Y1, X2, Y2, Xn, Yn” şeklindeki koordinatların da anlamı farklı olur.
shape=“rect” değeri kullanılırsa,
X1 ve Y1 şeklin sol üst köşesinin, tarayıcı penceresinin sol üst köşesinden itibaren kaç piksel sağa ve aşağı konulacağını;
X2 ve Y2 ise şeklin sağ alt köşesine soldan ve yukarıdan itibaren kaç piksel olduğunu belirten koordinatlarını gösterir.
(Örnek: shape=rect, coords=”0,0,9,9”).
shape=“circle” olarak tanımlanırsa, koordinatlar dairenin merkezini ve çapını gösterir.
(Örnek: shape=circle coords=”10,10,5).
shape=”poly” çok kenarlı bir şekil tanımlanması halinde, her bir koordinat diğerine, son koordinat da birinciye bağlanır.
(Örnek: shape=”poly” coords=”10,50,25,20,20,50”).
Rel=”text”: Kurulacak ilişkinin niteliğini belirtir. Tarayıcılar, çoğu zaman bu ifadeye bakarak, bağlantı kurulunca ne yapabileceklerini bilirler.
Örneğin “text” yerine “stylesheet” yazarak, tarayıcıya alacağı dosyanın, daha sonra textleri biçimlendirmekte kullanılacağı belirtilir.
HREF=”url”: URL(Uniform Recource Locator), Internet’te adres demektir. Bu adres, kullanıcının kendi sabit diskinde bir klasör yada alt-klasör içindeki bir dosyanın adı olabileceği gibi;
HTTP, FTP yada E-MAIL yoluyla ulaşılabilecek bir Web adresi ve o adresin içindeki bir dosya olabilir. Erişilecek dosya, HTML dosyası olabileceği gibi, grafik, ses, video yada herhangi bir başka çoklu-ortam ögesi, program (.bat, .exe veya .com) ya da sıkıştırılmış ZIP dosyası olabilir.
IE gibi tarayıcılar genellikle, bir bağlantı ile kendisine gelen dosyayı ne yapacağını bilemezse, kullanıcıya bu dosyayı yerel sabit diske kaydetmeyi önerirler.
ÖRNEK UYGULAMA:
<html>
<head>
<title>Image Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<img src="sylvester.gif" width="238" height="219" name="silvo" border="0" usemap="#silvoMap">
<map name="silvoMap">
<area shape="rect" coords="112,47,165,79" href="algo.html">
</map>
</div> </body> </html>
Fare resmin burnuna sürüklendiğinde map oluşturulurken verilen link belirteci olan el işareti göründüğünde tek tıklama yapılarak link verilen algo.html sayfası Şekil-21’de görüldüğü gibi taryıcıda görüntülenecektir.


Şekil 21-Image Map Görünümü

Hiç yorum yok:

Yorum Gönder