ana sayfaya dön

Bölüm 12: IMAGEMAP

Ders 83: ImageMap Oluşturulması

Ders Hedefi:
Üzerinee birden fazla bağlantı eklemek içim ImageMap olarak kullanacağınız bir resim hazırlayın.

Atölye:
Aşağıdaki işlemleri adım adım uygulayın.

1. t82_noframe klasörünü kopyalayın ve yeni klasörün ismini t83_imagemap olarak değiştirin.

2. Paint kullanarak 80 piksel genişliğinde ve 200 piksel (Resim/Öznitelikler) yüksekliğinde bir resim hazırlayın. Üzerine bir dikdörtgen çizin ve içerisini kırmızı ile doldurun.

3. Resim menüsündeki Donuk Çiz komutundaki işareti kaldırın. Daha sonra Arial yazı tipi ve 10 piksel büyüklüğünü kullanarak aşağıdaki başlıkları yazın.

Ana Sayfa, Aile, Hobiler, İletişim, Materyal, Sözlük

4. Görünüm/Yakınlaştır/Özel ve Görüm/Yakınlaştır/Kılavuzu Göster komutunu kullanarak piksel kılavuzlarını görüntüleyin. İlk başlığı, üst kenardan 10 piksel ve sol kenardan da 5 piksel uzakta olacak şekilde yerleştirin.

5. Diğer başlıkları da sol kenardan 5 piksel ve üstündeki başlıktan 10 piksel aşağıda olacak şekilde yerleştirin.

6. Dosyayı linkcugu.gif adı altında t83_imagemap/resimler klasörüne kaydedin. Şimdi Paint programını kapatın ve navigasyon.htm dosyasını Not Defteri'ni kullanarak açın.

7. Tabloya ait tüm, yani <TABLE align= "center"> ile <TABLE> arasında kalan tüm kaynak kodu silin. Bunun yerine aşağıdaki kodu girin:

<MAP name="navigasyon"></MAP><IMG src="resimler/linkcubugu.gif" border="0" usemap="#navigasyon">

8. Üzerinde değişiklik yaptığınız sayfayı Dosya/Kaydet komutunu kullanarak kaydedin ve indeks.htm dosyasını browser penceresinde görüntüleyin.


Ek Bilgi:
Eğer bir resmi, üzerindeki farklı alanlara tıklandığı zaman değişik bağlantılara yönlendirecek şekilde görüntülemek istiyorsanız bir ImageMap oluşturmalısınız.

ImageMap, yani üzerinde bir çok bağlantının bulunduğu bir resim bir harita gibi düşünülebilir. Resim parçalara ayrılmıştır ve her bir parçasına başka bir bağlantı atanmıştır. Bu, basit ImageMap örneğinde Hotspots olarak isimlendirilen bağlantıların nasıl yerleştirileceğini daha iyi öğrenebilirsiniz. Bir resmi ImageMap olarak kullanmak için ilk olarak aşağıdaki ana yapıya benzer şekilde tanımlanması gereklidir:

<MAP name= " ">
İlk bağlantının yeri
İkinci bağlantının yeri

<MAP>

Bir web sayfasının çok sayıda ImageMap içerebilmesi için ImageMap'i "name" özelliğini kullanarak isimlendirmelisiniz. <MAP></MAP> arasında tanımlanan bağlantıların listesi örnekte boş bırakılmıştır. Resme ait komutları normal bir şekilde ekleyin ve ek olarak usemap özelliği yardımıyla üzerinde bağlantıların tanımlandığı ImageMap ismini girin.

<IMG src=" " border= "0" usemap= "#Map ismi">

Özetle:
Üzerinde bir çok bağlantının bulunduğu bir resim, ImageMap oluşturmak için ImageMap kullanımı için temel olan <MAP></MAP> komutlarını web sayfasına eklemelisiniz.Ayrıca name özelliğini kullanarak ImageMap'i isimlendirmelisiniz.

Resmi, <IMAGE> komutunu kullanarak ekleyin. İçerisinde bağlantı listesinin bulunduğu ImageMap'in ismini girmek için de "usemap" özelliğini kullanın. ImageMap ismi, önüne "#" işareti konularak tanımlanır.

Konu testi:
1. Web sayfalarında ImageMap olarak ne belirtilir?
A. Bir resim galerisi
B. Bir bağlantı tanımlanmış olan her resim
C. Üzerinde bir çok bağlantı tanımlanan bir resim

2. Bir ImageMap tanımlamak için hangi HTML kodu kullanılır?
A. <IMAGE></IMAGE>
B. <MAP></MAP>
C. <USEMAP></USEMAP>

3. <IMAGE> komutunun usemap özelliği ile ne belirtilir?
A. ImageMap olarak kullanılacak olan resim dosyasının ismi
B. Resmin üzerine tıklandığı zaman açılacak olan resmin ismi
C. Bağlantı tanımlamaların bulunduğu ImageMap ismi

Ders 84: Hotspots tanımlaması

Ders Hedefi:
Bir resim üzerinde birden fazla bağlantı tanımlamak için Hotspots tanımlamalısınız.

Atölye:
Aşağıdaki işlemleri adım adım uygulayın.

1. t83_imagemap klasörünü kopyalayın ve yeni klasörün ismini t84_hotspots olarak değiştirin.

2. Yeni klasör içerisindeki navigasyon.htm dosyasını Not Defteri'ni kullanarak açın ve ImageMap tanımlamasına ait aşağıdaki kaynak kodu girin:

<MAP name="navigasyon"><IMG src="resimler/linkcubugu.gif" border="0" usemap="#navigasyon">
<AREA shape="rect" coords="0,0,80,25" href="home.htm" target="anacerceve" alt="Ana Sayfa">
<AREA shape="rect" coords="0,25,80,50" href="aile.htm" target="anacerceve" alt="Benim Ailem">
<AREA shape="rect" coords="0,50,80,75" href="hobiler.htm" target="anacerceve" alt="Hobilerim">
<AREA shape="rect" coords="0,75,80,100" href="iletisim.htm" target="anacerceve" alt="İletisim">
<AREA shape="rect" coords="0,100,80,125" href="form.htm" target="anacerceve" alt="Ücretsiz Ders Materyali">
<AREA shape="rect" coords="0,125,80,150" href="sozluk.htm" target="anacerceve" alt="Web Sözlüğü">
</MAP>

Ek Bilgi:
Image için tanımladığınız, üzerinde bağlantı bulunan her alan Hotspot olarak adlandırılır. Hotspot, <AREA> (Area, alan veya bölüm anlamındadır) komutu kullanılarak tanımlanır.

<AREA shape=" " coords="" href=" " target=" " alt=" ">

Resim içerisinde tanımlamak istediğiniz her bir bağlantı alanı için bir <AREA> komutu girin. Söz konusu bağlantı alanın şeklini ise shape özelliği ile belirleyebilirsiniz. Bunun için rect (dörtgen), circle (çember), polygon (çokgen) biçimlerini kullanabilirsiniz.

Ardından coords özelliğini kullanarak bağlantı alanını tanımlayan koordinat bilgilerini girebilirsiniz. Bir dörtgen için sol üst köşeye olan yatay, sol üst köşeye olan dikey, sağ alt köşeye yatay ve sağ alt köşeye dikey olmak üzere dört değer girmelisiniz. Tüm değerler piksel cinsinden olmalıdır.

Bir çember için de orta noktasının bulunacağı yerin x/y koordinatları ve çapının piksel cinsinden girilmesi gereklidir. Bir çokgen için de her köşesinin, resmin sol üst köşesine olan yatay ve dikey uzaklıklarının girilmesi gereklidir.

Hotspots'un manuel olarak oluşturulması zahmetlidir. Bu nedenle ImageMap hazırlamak için bir çoğu ücretsiz olan çok sayıda program bulabilirsiniz. Bu programlar sayesinde ImageMap tanımlamalarını fare yardımıyla yaptığınız zaman ilgili koordinat değerleri otomatik olarak hesaplanır. Ayrıca bazı web sayfası editörleri de, örneğin Frontpage, otomatik olarak ImageMap oluşturan araçlara sahiptirler.

Özetle:
İçerisinde bir bağlantı tanımlanacak olan her alan için <MAP></MAP> komutları arasında ayrı bir <AREA> kodu kullanılmalıdır.

Bağlantı alanının şekli shape özelliği kullanılarak belirlenir.

Bağlantı alanının koordinatlarının belirtilmesi için de coords özelliği kullanılır.

Konu Testi:
1. Bir Hotspot'un şekli hangi özellik kullanılarak belirlenir?
A. shape
B. coords
C. target

2. Üç şeklinde bir Hotspot tanımlamak için aşağıdaki değerlerin hangisi kullanılır?
A. rect
B. circle
C. polygon

3. Bir dörtgen tanımlaması için kaç tane değer girilmelidir?
A. 2
B. 3
C. 4

Geçen ayın cevapları
Konu  1. Soru  2. Soru  3. Soru
75
C A A
76
B B A
77
B C B
78
B B A
79
B C C
80 A A C
81 A C C
82 C A B
ana sayfaya dön