Image Map-Resim Haritası

Image Map / Resim Haritası       Resimlerin üzerinde dolaşırken bazı bağlar görürsünüz, aynı resim üzerinde bir kaç tane bağ(link) olur mesela. Bunu Dreamweaver’da Image Map(Resim Haritası) özelliğiyle yapıyoruz. Bir Image Map(Resim Haritası) tek bir isme sahip olur ve en az 1 tane olmak üzere Hotspot(Aktif Bölge)’lardan oluşur. Öncelikle sayfamıza Insert>>Image menüsüyle ya da Image düğmesiyle bir resim ekliyoruz. Properties penceresinde resme ait özellikler oluşur. Bu penceredeki Map bölümünde yer alan düğmeler Resim Haritası eklememizi sağlar. Bir Resim Haritası eklemeden önce Resim Haritamız için bir isim seçip bunu Map etiketi yanındaki metin kutusuna yazmanız gerekir. Map bölümünde 3 farklı şekilde çizim aracı vardır. Rectangular Hotspot Tool ( ) düğmesi dikdörtgen veya kare şeklinde bir Resim Haritası oluşturmamızı sağlar. Oval Hotspot Tool ( ) düğmesi daire şeklinde bir Resim Haritası oluşturmamızı sağlar. Polygon Hotspot Tool ( ) düğmesi ise çok kenarlı şekillere sahip olan Resim Haritaları oluşturmamızı sağlar. Bu düğmelerden birini seçip resim üzerine geldiğimizde imlecimiz artı şekline benzer bir hal alır. Faremizin sol tuşuna basılı tutarak resim üzerinde seçtiğimiz şekli çizdiğimizde Properties penceresinde Hotspot(Aktif Böge) özellikleri görünür olur. Bu arada çizdiğim diktörgen ya da oval şekil mavi-yeşil bir renkte olur. Bu şekil sadece çalışma alanımızda görünürdür. Tarayıcıda resim üzerinde çizdiğimiz şekiller görünmez. Bu penceredeki Link metin kutusu Aktif bölgeye tıklandığında gidilecek sayfayı seçmemiz içindir. Target çekme menüsü ise bu sayfanın açılacağı hedefi belirlemek içindir. Alt çekme menüsünü ise sayfamızı görüntüleyen ziyaretçiler, resmimiz üzerindeki Aktif bölge üzerine geldiklerinde görmelerini istediğimiz metni yazmak içindir. Bu bölümdeki Link, Target ve Alt özellikleri hakkında daha ayrıntılı bilgiyi bu bölümde yer alan Metne Link Eklemek konusunda bulabilirsiniz. Bir de Pointer Hotspot Tool ( )düğmesi vardır. Bu düğmeye tıkladığımızda imlecimiz tekrar ok şekline dönüşür ve bu düğme basılıyken oluşturğumuzu Aktif bölgeyi faremiz ile sürükleyerek yerini değiştirebilir ya da kenarlarında oluşan tutamaçları yine fare ile tutarak ölçülerini değiştirebiliriz. Bu özellikleri verdikten sonra web sayfamızın boş bir alalına vey resmin Aktif bölge çizilmemiş bir yerine tıkladığımızda resim haritamızdaki ilk aktif bölgeyi oluşturmuş oluruz. Şimdi bir iki örnek yapalım 🙂 Üzerinde 1 kurşun kalem, bir boya kalemi bir de fırça olan bir resim ekliyorum sayfama. Resmi seçili hale getirip Properties penceresi Map bölümünde resimime KalBoyFir ismini veriyorum. Rectangular Hotspot Tool düğmesine tıklayarak kurşun kalemimi kapsayacak, dikdörtgen şeklinde bir Aktif Bölge oluşturuyorum. Açılan Hotspot özelliklerinde daha önce hazırladığım Kalem.htm sayfasına bağ verip bir hedef seçiyorum ve Alt çekme menüsüne “Buraya tıklayarak Kurşun Kalem resmine ulaşabilirsiniz.” yazıyorum ve resmin Hotspot eklenmemiş bir alanını tıklıyorum. Tekrar Rectangular Hotspot Tool‘u seçip boya kalemi üzerinde bir aktif bölge oluşturuyorum ve Boya.htm sayfasına bağ verip Alt çekme menüsüne “Buraya tıklayarak Boya Kalemi resmine ulaşabilirsiniz.” yazıyorum. Son olarak Fırça üzerinde bir aktif bölge oluşturup Firca.htm dosyasına bağ verip Alt çekme menüsüne “Buraya tıklayarak fırça resmine ulaşabilirsiniz.” yazıyorum. Bu arada eğer çekme menüyü sağındaki okla açarsanız eklediğimiz bütün Alt etiketlerinin burada yer aldığını görebilirsiniz. Eğer bir resim üzerinde birden çok aktif bölge için aynı Alt etiketini kullanacaksanız tekrar yazmak yerine buradan seçebilirsiniz. Evet sonuç olarak 3 Aktif Bölgeli bir Resim Haritası eklenmiş resmimiz oldu. Örnek resmi yandaki bağa tıklayarak görebilirsiniz. Örnek 1 Şimdi sadece Alt etiketlerinin yer aldığı bir resim oluşturalım. 🙂 Deniz Kaplumbağası resmimizi sayfamıza ekliyoruz. Daha sonra Polygon Hotspot Tool düğmesine tıklayarak kaplumbağamızın gövdesi üzerinde bir Aktif Bölge oluştuyoruz. Link metin kutusunda bir aktif bölge oluşturduğumuzda sadece # işareti görünür haldedir. Bu metin kutusuna dokunmadan Alt çekme menüsüne “Kaplumbağanın Gövdesi” yazıyoruz. Daha sonra Polygon Hotspot Tool‘u seçip kaplumbağanın kafası üzerinde bir Aktif Bölge oluşturup bu aktif bölgeye ait Alt çekme menüsüne “Kaplumbağanın Başı” yazıyoruz. Bu işlemi kaplumbağanın dört bacağı için de tekrarlıyoruz. Sonuçta oluşturduğumuz resim bir tarayıcıda görüntülendiğinde kaplumbağanın başı üzerine gelindiğinde “Kaplumbağanın Başı”, gövdesi üzerine gelindiğinde “Kaplumbağanın Gövdesi” yazacaktır. Böylece kaplumbağamızın temel uzuvlarını tanıtan bir Resim Haritası hazırlamış olduk :)) Örnek resmi yandaki bağa tıklayark görebilirsiniz. Örnek 2