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. Ö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 ( Oval Hotspot Tool ( Polygon Hotspot Tool ( 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 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. Bir de Pointer Hotspot Tool ( 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 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 |
Reklamlar
bu hangi programla yapıldıgını yazsaydınızya 🙂
image ready kardeşim
Dreamweaver
ahmet tatar v
asdasdsadasdsa
teşekkürler güzel bir paylaşım . . .
selam arkadaşlar bende siteme a map yapmak istiyom. nasıl yapacağız tşkler.