» Resimlerinizin Haritasını Çıkartın

IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz.

<MAP NAME="map1"><!-- Örnek resmin HTML kodları -->
<AREA SHAPE="RECT"  COORDS= 7, 7, 119, 74  HREF="http://www..com.tr">
<AREA SHAPE="CIRCLE"  COORDS=178, 41, 35  href="http://www.erenet.net">
</MAP>

Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=map1.gif'  USEMAP=#map1 > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için map1'  isimli haritanın kullanılacağını belirtiriz.

MAP TAG'I <MAP NAME=deneme > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir.

AREA TAG'I
<AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere>

COORDS
Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar

SHAPE=tip
Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve x1, y1, x2, y2'  değerleri kullanılır. CIRCLE Bir çember tanımlar ve OrtaX, OrtaY, Yarıçap'  değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir.

HREF
Şekle tıklandığında hangi adrese gidileceğini belirler.

TARGET
Gidilecek adresin hangi pencerede açılacağını belirler

Peki tanımladığımız şekillerin koordinatlarını nasıl bulacağız? Bu da çok basit, en büyük yardımcımız olan Paint Shop Pro'yu kullanarak istediğimiz bir noktadaki koordinatları bulabiliriz. Örneğin bir karenin sınırlarını öğrenmek istiyorsunuz, hemen resmi açın ve tanımlamak istediğiniz karenin üst sol noktasına gidin. X1 ve Y1 noktalarını durum çubuğundan öğrenip bir kenara not ettikten sonra sol alt sınıra gidin ve X2, Y2 noktalarını öğrenin. İşte bu kadar basit.

Bu makale HTML Öğreniyorum kategorisinde kayıtlıdır.

Etiketler: Resimlerinizin Haritasını Çıkartın

Copyright © Erenet.NET Tüm hakları saklıdır.

Yayınlanma 2006-11-18 (2317 okunma)

Geri Dön    Tavsiye Edin    Yazdır