Bölüm 12: IMAGEMAP Ders 83: ImageMap Oluşturulması Ders Hedefi: Atölye: 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.
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= " "> 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: 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: 2. Bir ImageMap tanımlamak için hangi HTML
kodu kullanılır? 3. <IMAGE> komutunun usemap özelliği
ile ne belirtilir? Ders 84: Hotspots tanımlaması Ders Hedefi: Atölye: 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"> Ek Bilgi: <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: 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: 2. Üç şeklinde bir Hotspot tanımlamak için
aşağıdaki değerlerin hangisi kullanılır? 3. Bir dörtgen tanımlaması için kaç tane
değer girilmelidir? |
||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||