Web Mekan
Türkçe İngilizce Almanca Fransızca

Web Mekan | Webdeki Yeni Uğrak Mekanınız

Dreamweaver ile Resim Degistirmece

Dreamweaver ile Resim Değiştirmece

Zaman zaman güzel örneklerini gördüğümüz bu resim değiştirmece olayını Dreamweaver ile oldukça kolay yapabilmekteyiz. Rollover resimler konusunda bir resmin üzerine gidildiğinde yerine başka bir resim çıkmasını nasıl yapacağımızı görmüştük. Şimdi ise bir resim ya da linkin üzerine gidildiğinde (veya tıklandığında) başka bir resmin / resimlerin değiştirilmesini göreceğiz. Olayın temelini "Swap Image" isimli Behavior oluşturmakta. Yani rollover resimlerde aslında birer "Swap Image" olayıdır (event) diyebiliriz.

Bu makalede yapacağımız örneğin son halini görmek için buraya, Photoshop dosyasının da dahil olduğu tüm uygulamayı indirmek için buraya tıklayabilirsiniz. Evet, örneği çalıştırdığınızda ne yapmaya çalıştığımızı daha iyi göreceksiniz. Neyse lafı fazla uzatmadan uygulamaya geçelim.

Önce materyalleri hazırlayalım

İşlemlere başlamadan önce grafik dosyalarınızı hazırlamanız gerekmektedir. Ben Photoshop ile basit bir tasarım yapıp "Slice tool" ile resmi dilimlere ayırdım

 

Dreamweaver Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz

Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz

Ardından File / Save for web menüsünden kaydedeceğim resim dosyası türünü ve kalitesini belirleyip "Save" düğmesine bastım.

 

Dreamweaver File / Save for web menüsünden çalışmamızı kaydediyoruz

File / Save for web menüsünden çalışmamızı kaydediyoruz

Son olarak dosya kayıt iletişim penceresinde "Kayıt türü" olarak "HTML and images (*.html)" seçeneğini seçip tüm dilimleri (All slices) kaydettim.

 

Dreamweaver Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz

Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz

Böylece Photoshop çalışmamızı bir web sayfasına aktarmış olduk. Seçtiğimiz dizinde bir ".html" dokümanı ve "images" klasörü içerisinde de dilimlenmiş olan çalışmamızın grafik dosyaları kaydedilecektir. Sonrasında bu HTML dokümanını DW ile açıp ilgili değişiklikleri yapacağız. Sizde kendi ihtiyacınıza yönelik grafik dosyalarını hazırlayarak konuyu takip edebilirsiniz.

 

Dreamweaver Çalışmamızı Dreamweaver içerisine aktardık

Çalışmamızı Dreamweaver içerisine aktardık

Dokümanı DW ile açtığınızda göreceğiniz üzere Photoshop dilimleri bir tablo içerisinde yerleştirip düzgün görünmesini sağlamaktadır. Bizde bu tabloyu tasarımımızda istediğimiz yere kopyalayabilirsiniz. Kopyala / Yapıştır işlemleri sırasında tablonun ve hücrelerin özelliklerini değiştirip bozmamaya özen göstermelisiniz, aksi takdirde kaymalar olabilir. Beyaz boş dilimleri silerek sayfanın yüklenme boyutunu azaltabilirsiniz, fakat sildiğiniz bu düz beyaz dilimlerin bulunduğu tablo hücrelerinin boyutlarını sildiğiniz dilim boyutu olarak yükseklik ve genişlik cinsinden girmelisiniz. Böylece deformasyonu önleyebilirsiniz.

 

Eğer tabloyu kopyaladığınız yeni sayfada dilimler arasında boşluklar olursa yeni bir stil yaratıp border, padding, magrin değerlerini 0 (sıfır) olarak girin, font size ve line heidght değerlerini de 1 piksel olarak atayın ve bu stili tabloya uygulayın. Böylece genişlemeleri önlemiş olacaksınız.

Genişlemelere engel olmak için gereken ilgili CSS stili için kaynak kod şu şekilde olmalı:

 

  1. .TabloIcinStil{

  2. font-size: 1px;

  3. line-height: 1px;

  4. border-collapse: collapse;

  5. margin: 0px;

  6. padding: 0px;

  7. border: 0px;

  8. }

  9.  

Neyse işin hazırlık kısmı bu şekilde sizde kendi uygulamalarınızı yapıp bu aşamaya geldiyseniz şimdi asıl konumuza dönelim.

Resim Değiştirmece (Swap Image)

Şimdi bu örnekteki tasarımımızda menü linkleri bulunmakta (Hakkımızda, Ürünlerimiz, Projelerimiz...). Resimdeki ilgili dilimleri seçip ilgili linkleri atıyoruz.

 

İlgili dilimi seçip Properties panelinden link atıyoruz

İlgili dilimi seçip Properties panelinden link atıyoruz

Bu şekilde tüm menü elemanlarına link atadıktan sonra resim değiştirme işlemine geçebiliriz. Şimdi burada yapacağımız örnekte menü elemanlarından birinin üzerine gittiğimizde ortadaki alan değişecek ve ilgili bölümün resmi çıkacak.

Burada yapmamız gereken ek bir işlem var oda değişimin yapılacağı resimlere birer ID atamaktır. Böylece hangi resmin ne zaman değişeceğini ID sini zikrederek belirtebileceğiz. Bunun için, DW'da resimlerin üzerine bir kez tıklayıp seçtikten sonra Properties panelindeki ID bölümüne resim ile ilgili bir ID girmeliyiz. ID girerken Türkçe karakter ve özel karakterler girmemeye ve "_ -" gibi ifadeler kullanmamaya özen göstermelisiniz.

 

Değişecek  resimlere ID atıyoruz

Değişecek resimlere ID atıyoruz

Olaya dahil olacak bütün resimlere birer ID atadıktan sonra ortadaki resim olan ve değişecek resme de ID atmayı unutmadığımızdan emin olarak işleme devam edebiliriz.

Eğer açık değilse Window / Behaviors (Shift+F4) menüsü ile Behaviors panelini açıyoruz. Şimdi menü elemanlarından "Hakkımızda" linkinin üzerine bir kez tıklıyor ve seçiyoruz. Seçim işlemini "Tag selector" panelinden de yapabiliriz.

 

Seçim işlemini Tag selector panelinden de yapabiliriz.

Seçim işlemini Tag selector panelinden de yapabiliriz.

Ardından Behaviors panelindeki artı işaretine (+) tıklayıp açılan menüden "Swap Image" seçeneğini seçiyoruz.

 

Behaviors panelinden Swap Image seçeneğine tıklıyoruz.

Behaviors panelinden Swap Image seçeneğine tıklıyoruz.

Açılan iletişim penceresinde doküman içerisindeki resimlerin listelendiğini göreceksiniz. Buradan "Hakkımızda" menü elemanının üzerine gelindiğinde değişecek kısımda çıkmasını istediğiniz resmi seçip "Set soruce to" bölümünde "Browse / Gözat" düğmesine tıklayıp ilgili resmi seçiyoruz.

 

Swap image iletişim penceresi

Swap image iletişim penceresi

"Preload images" seçeneği doküman yüklenirken resimlerin arka fonda yüklenmesini ve linklerin üzerine gidildiğinde henüz yüklenmemiş resim olmamasını sağlayan bir seçenektir. "Restore images onMouseOut" seçeneği ise fare imlecinin resim üzerinden çekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir. İlgili ayarları yapıp "OK" dediğinizde Behaviors panelde bu link için 2 olay (event) atandığını göreceksiniz. Bunlardan

  • "onMosueOver" (fare imleci üzerine geldiğinde) olayına atanan "Swap image"; resim değiştirme işlemini yapan fonksiyonu çağır

  • "onMouseOut" (fare imleci üzerinden gidince) "Swap image Restore"; tekrar eski resmin çıkmasını sağlayan fonksiyonu çağırır.

 

İşlem sonrası Behaviors panelin görünümü

İşlem sonrası Behaviors panelin görünümü

Dokümanı kaydedip tarayıcı ile görüntülediğinizde ilgili link üzerine fare imleci ile gidildiğinde ortadaki resmin değiştiğini göreceksiniz.

Tüm linkler için bu işlemi tekrarlayarak değişmesini istediğiniz resimleri atayabilirsiniz. Çalışmanın son halini görmek için burayatıklayınız. Bu örnekte sadece bir resmin değişmesini sağladık fakat aynı anda birkaç resmin değişmesini de sağlamak mümkündür. "Swap image" iletişim penceresinde listeden değişik resimler seçip teker teker "Set source to" ayarı yaparsanız aynı anda çoklu resim değişimi sağlayabilirsiniz. Örneğin sitemizde kullandığımız oylama sisteminde böyle çoklu bir resim değiştirme işlemi yapılmaktadır. Sizde bir örnek yaparak işleyişi daha iyi kavrayabilirsiniz.

 

Oylama sisteminde aynı anda 5 yıldız birden değişiyor

Oylama sisteminde aynı anda 5 yıldız birden değişiyor

 


>> Dreamweaver ile Resim Degistirmece



Zirve100 Toplist
- Toplist Toplist Dizin,toplistCam balkon firma ekle site ekle firmalar Sektör Rehberi


Etiket Bulutu:
Devamı için tıklayınız... Web Poll KOMİK SÖZLER Webmaster Bilgileri Webmaster FORUM Deli Fıkraları Toplist Fikralar Temel Fıkraları link Flash Dersleri Mozilla Fireworks Beceri Oyunları NASREDDİN HOCA FIKRALARI Kayserili Fıkraları Dövüş Oyunları Nasreddin Hoca Fıkraları Avcı Fıkraları İLGİNÇ BİLGİLER online casino Frontpage Dersleri iletisim Oyunlar Dreamwaver Dersleri TEMEL FIKRALARI Doktor Fıkraları Zeka Oyunları DUVAR YAZILARI DOKTOR FIKRALARI Ana Sayfa Anasayfa MÜZİK ODASI HTML Dersleri Fireworks Dersleri Sitemap BECERİ OYUNLARI google6dffbf46f16e81d3l ZEKA OYUNLARI Asker Fıkraları Dersler Html Kodları MACERA OYUNLARI Ziyaretci Defteri AVCI FIKRALARI Ziyaretçi Defteri Dreamweaver Dersleri Cam balkon HTML Kodlari ASP Dersleri Siteni Ekle Okul Fıkraları PHP Dersleri ASKER FIKRALARI Erzurumlu Fıkraları Erasles DÖVÜŞ OYUNLARI İkon arşivi ikon Arsivi Macera Oyunları Anketler KAYSERİLİ FIKRALARI ERZURUMLU FIKRALARI İletişim DELİ FIKRALARI OKUL FIKRALARI
Link Değişimi
İndirkes
Css-Sablon
Bedava Sitem Destek
Siteni Ekle
Siteni Ekle
İstatistikler
Site İstatistikleri:
Online :
Tekil Hit : 290
Çoğul Hit : 338
IP No : 18.118.164.100

Saat ve Takvim
Duyurular
Sitemiz Açılmıştır!

Güncellemelerimiz devam edecektir!





Tasarım Çalınması Halinde Gereken İşlemler Yapılacaktır!

***Sitemiz en iyi Mozilla Fireworks 1024*768 çözünürlükte görüntülenmektetir!***

Tüm Hakları Saklıdır!

Copyright 2009

Tasarım-kodlama: Erasles

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol