Cihat Şeker
Üye
- Kayıt
- 7 Haziran 2008
- Mesaj
- 533
- Tepki
- 6
Uzun bir aradan sonra yeni bir dersle karşınızdayım. Bu kez resimlerde map kullanımı konumuz.
Bazı sitelerde görmüşsünüzdür; resmin bir yerine tıklayınca başka bir adrese yönlendirilirsiniz, başka bir yerine tıklayınca başka bir adrese yönlendirilirsiniz, bu böyle uzar gider... =)
Merak edeniniz olmuştur, "Bu herif nasıl yapmış bunu" veya "Nasıl yapmış bu herif bunu leynnnn" gibisinden içiniz içinizi kemirmiştir.
Şimdiki yazımın bu arkadaşlara büyük faydası olacak, eminim
Başlayalım anlatmaya...
Öncelikle resmin .gif formatında olması gerekiyor. Resim tanımlama kodu olan
koduna birkaç ekleme yaparak ve map fonksiyonlarını www tarayıcısına tanıtarak işlemleri bitireceğiz.
Resim Tanımlama:
Burdaki ISMAP, resmin map olarak kullanıldığını belirtiyor. (it is a map hesabı
).
usemap="#mapismi" mapi resim içinde tanımlayan kod, şimdi yazacağım tanımlama kodlarıyla daha iyi anlayacaksınız.
Map(Harita) Tanımlama:
Bu kodları inceledikten sonra daha önce belirttiğim,
şeklindeki kod gelsin. Gördüğünüz gibi name bölümüne #mapismi yazdık, yani haritanın tanımını yaptık.
Shape belirteci ile dikdortgen, daire veya üçgen tanımlayabilirsiniz.
Koordinat sistemi kullanılıyor burda; x,y,-x ve -y. Ben de buna göre anlatacağım tabi =)
Dikdörtgenin koordinatlarını: -X,+Y,+X,-Y biçiminde coords="..." bölümünden belirtiyoruz. href="..." bölümü ise belirtilen koordinatlardaki alana tıklanıldığında hangi adrese bağlanılacağını ifade ediyor.
Çember de terimler şöyle;
X = Merkez
Y = Merkez
R = Yarıçağ
Zaten bunları biliyorsunuzdur.
Geldik üçgene. Sırayla her köşenin X,Y koordinatlarını giriyoruz. Dikkat edeceğiniz husus, üçgenin noktalarını saat yönünden ayarlamanız gerekiyor. Ayrıca üçgeni kapatmaya tarayıcılardaki oluşan sorunlar sebebiyle dikkat etmelisiniz.
Ve son olarak, kodunu kullanırsanız resmin diğer bölgelerine tıklandığında (belirttiklerinizin dışındaki) hiçbirşey olmaz.
İşte, artık siz de o "hayretle, ünlem işaretleri dökerek baktığınız" ya da farklı ifadeler kullandığınız map kullanılmış resimleri sergileyebilirsiniz. =) Kolay gelsin.
Bazı sitelerde görmüşsünüzdür; resmin bir yerine tıklayınca başka bir adrese yönlendirilirsiniz, başka bir yerine tıklayınca başka bir adrese yönlendirilirsiniz, bu böyle uzar gider... =)
Merak edeniniz olmuştur, "Bu herif nasıl yapmış bunu" veya "Nasıl yapmış bu herif bunu leynnnn" gibisinden içiniz içinizi kemirmiştir.
Şimdiki yazımın bu arkadaşlara büyük faydası olacak, eminim
Başlayalım anlatmaya...Öncelikle resmin .gif formatında olması gerekiyor. Resim tanımlama kodu olan
Kod:
<img src=...>koduna birkaç ekleme yaparak ve map fonksiyonlarını www tarayıcısına tanıtarak işlemleri bitireceğiz.
Resim Tanımlama:
Kod:
<img src="resim.gif" ISMAP usemap="#mapismi" width=160 height=100>Burdaki ISMAP, resmin map olarak kullanıldığını belirtiyor. (it is a map hesabı
usemap="#mapismi" mapi resim içinde tanımlayan kod, şimdi yazacağım tanımlama kodlarıyla daha iyi anlayacaksınız.
Map(Harita) Tanımlama:
Kod:
<map name="mapismi"> <area shape="rect" coords"1,1,159,50" href="dikdortgen.html"> <area shape="circle" coords="80,100,40" href="daire.html"> <area shape="polyg" coords="10,110,150,110,80,190,9,110" href="ucgen.html"> <area shape="default" nohref> </map>Bu kodları inceledikten sonra daha önce belirttiğim,
Kod:
<img src="resim.gif" ISMAP usemap="#mapismi"şeklindeki kod gelsin. Gördüğünüz gibi name bölümüne #mapismi yazdık, yani haritanın tanımını yaptık.
Shape belirteci ile dikdortgen, daire veya üçgen tanımlayabilirsiniz.
Koordinat sistemi kullanılıyor burda; x,y,-x ve -y. Ben de buna göre anlatacağım tabi =)
Dikdörtgenin koordinatlarını: -X,+Y,+X,-Y biçiminde coords="..." bölümünden belirtiyoruz. href="..." bölümü ise belirtilen koordinatlardaki alana tıklanıldığında hangi adrese bağlanılacağını ifade ediyor.
Çember de terimler şöyle;
X = Merkez
Y = Merkez
R = Yarıçağ
Zaten bunları biliyorsunuzdur.
Geldik üçgene. Sırayla her köşenin X,Y koordinatlarını giriyoruz. Dikkat edeceğiniz husus, üçgenin noktalarını saat yönünden ayarlamanız gerekiyor. Ayrıca üçgeni kapatmaya tarayıcılardaki oluşan sorunlar sebebiyle dikkat etmelisiniz.
Ve son olarak, kodunu kullanırsanız resmin diğer bölgelerine tıklandığında (belirttiklerinizin dışındaki) hiçbirşey olmaz.
İşte, artık siz de o "hayretle, ünlem işaretleri dökerek baktığınız" ya da farklı ifadeler kullandığınız map kullanılmış resimleri sergileyebilirsiniz. =) Kolay gelsin.