Map Ve İç Pencere Açmak

Dreamweaver behaviors kullanarak bir resim üzerindeki map ile belirlediğiniz alanlara fare gelince o alanla ilgili daha büyültülmüş bir resmi ekrana çıkaran uygulama. Daha büyük resim yeni web sayfası açılmadan gözükmektedir.
Öncelikle sayfamıza bir div eklemek zorundayız  sayfamıza "DIV" eklemek için "Desing" sayfamaızın üst tool barında bulunan "Layout" sekmesine tıklarız ve burdan bir "DIV" ekleyebiliriz aşağıdaki resim nasıl ekleneceğini göstermektedir.

Dreamweaver Behaviors kullanarak bir resim üzerindeki map ile belirlediğiniz alanlara fare gelince o alanla ilgili daha büyültülmüş bir resmi ekrana

Bu işlemimizi yaptıktan sonra örneğimizi uygulayacağımız resmimizi eklediğimiz "DIV"'in için koyuyoruz

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

bu aşamada resmimizi yerleştirmiş bulunuyoruz

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

ve daha sonra eklediğimiz resmi seçerek "desing" sayfamızın alt tool barında bylynan "image map" bölümden istediğimiz seçme alanını alarak belli bir yeri seçiyoruz

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana
Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana
ve bu işlemi yaptıktan sonra map ile seçtiğimiz yerin biyik halini yani sonradan gelicek halini aynı "DIV"ın üstüne bir "DIV" daha ekleyip resmi içine yerleştiriyoruz ve görünür özelliğini gizli yapıyoruz ki ilk çalıştırdığımızda ekranda gözükmesindiye

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana
Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

bu işlemimiz yaptıktan sonra "Desing" sayfamızın sağ tarafında bulunan "Behaviors-Efeckts-Grow/Shrink" sekmesini seçiyoruz tabiki bu işlemi yaptığımız map alanı seçiliyken yapıyoruz

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

bu sekmeye tıkladığımızda aşağıdaki ekran karşımıza çıkıyor
(aşağıdaki ekranın ne anlama geldiğini resimde açıklamış bulunuyorum...)

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

yukarıdaki pencerede önce yaptığımız map seçiliyken "GROW" efektini uyguluyoruz daha sonra "SHRİNK" efektini uyguluyoruz ki önce içe doğru gitsin sonra dışar doğru tekrar geri gelsin diye

Grow efekti: yaptığımız map seçiliyken aşağıdaki resimde gözüken ayrları yapıyoruz.
yanlız "DIV" seçtiğimiz yerde siz sonradan eklediğiniz yani büyük olan üstüne gelinince gözükücek resmin  dıvı seçilecektir bende beşinci dıv olduğu için oınu seçtim/(yanlışlık yaparsananız istediğiniz onuca varamassınız)!!!!!!!!

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

Shrink efekti:GROW efektinde yazdığım tüm bilgilerde burdada geçerlidir yani yine aynı divin benim beşinci sizin ise kaçıncıysa o divimizi seçmek zorundayız yani sonradan eklediğimiz divi seçeceğiz

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

bu işlemlerimizi yaptıktan sonra "Behaviors" bölünde 2 tane olay eklenmiş olucak bunların  "grow" yapığımız resme "MouseOver" olayına seçicez diğer yani "Shrink" yaptığımız resme ise "MouseOut" olayını seçicezki mouse seçili alan geldiğinde eklediğimiz resmin büyüğü çıksın mouse çektiğimizde ise geri gitsin diyede mouse over ekledik aşağıdaki resimde olduğu gibi olacaktır

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

bu işlemimizide tamamladıktan sonra yaptığımız örneğin uygulaması aşağıdaki gibidir bu aşağıdaki altı ifadede bu işlem uygulanmışıtr hepsi yukarıda anlattığım aynı yöntemle yapılmıştır her yei ifade için okadar "DIV" eklanmiştir

çalıştırdığımızdaki ilk hali

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

mousemuzu resmin üstğne getirdiğimizde resmin tam ortasından ikinci resim büyüyerek çıkmaktadır

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

mousemuzu resimden çektimizde bu sefer aynı şekilde küçülerek geri  gitmektedir

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Belirlediğiniz Alanlara Fare Gelince O Alanla İlgili Daha Büyültülmüş Bir Resmi Ekrana

Hazırlayan :Tolga GÜLBAKAN

13,746 Okunma Henüz yorum yapılmamış 01/05/2008 11:14:30

Yorumunuzu Ekleyin
Görsel Liste


Dreamweaver ve PHP ile dinamik sayfalar için MySQL veritabanı bağlantısı

Dreamweaver bir HTML editöründen fazlasını bizlere sunabilen bir ortam halini aldığı şu günlerde sunucu taraflı ihtiyaçlarınız için PHP ile neler yapabileceğimiz bu makalelerde anlatmaya çalışacağız

38,929 okuma,

Dreamweaver ve PHP ile dinamik sayfalar için MySQL veritabanı bağlantısı
Snippets Paneli Ve Araçları

Snippets paneli ve araçları

33,643 okuma,

Snippets Paneli Ve Araçları
Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore

Set nav bar ımage, set text, show hide elements, swap ımage, swap ımage restore

33,583 okuma,

Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore
Dreamweaver Behaviors Kullanarak Ufak Resmi Mouse Üzerine Geldiğinde Aynı Pencerede Büyütmek

Dreamweaver behaviors kullanarak bir resim üzerindeki map ile belirlediğiniz alanlara fare gelince o alanla ilgili daha büyültülmüş bir resmi ekrana çıkaran uygulama

30,242 okuma,

Dreamweaver Behaviors Kullanarak Ufak Resmi Mouse Üzerine Geldiğinde Aynı Pencerede Büyütmek
Dreamweaver İle Veri Tabanına Bağlanmak

Dreamweaver ile veri tabanına bağlanmak

28,528 okuma,

Dreamweaver İle Veri Tabanına Bağlanmak
Database Paneli

Database paneli

28,002 okuma,

Database Paneli
Div Çatılı sayfalar Oluşturmak

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2. 0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile

27,221 okuma,

Div Çatılı sayfalar Oluşturmak
Dreamweaver İle Veri Tabanı Bağlantısı Yapma, Verileri Listeleme, Tabloları Oluşturma Silme

Dreamweaver ile veri tabanı bağlantısı yapma, verileri listeleme, tabloları oluşturma silme vs.

25,544 okuma,

Dreamweaver İle Veri Tabanı Bağlantısı Yapma, Verileri Listeleme, Tabloları Oluşturma Silme
Page Properties penceresinden Arka Plan Ekleme

Page Properties; sayfada arka plan ekleme

24,049 okuma,

Page Properties penceresinden Arka Plan Ekleme
Recordset ile verileri sayfaya yazdırmak

Kayıt dizisi (recordset) ile Dreamweaver içerisinden veritabanına erişim sağlayarak, kriterlere göre ve ya istediğimiz sayıda kaydı sayfaya yazdırmak mümkün. Bizde bu makale ile veritabanı kayıt erişimlerini yakından inceleyeceğiz

22,947 okuma,

Recordset ile verileri sayfaya yazdırmak
Deprecated Menüsü, Show Events For, Get More Behavior

Deprecated menüsü, show events for, get more behavior

22,587 okuma,

Deprecated Menüsü, Show Events For, Get More Behavior
Dreamwever Yazılı Sorusu

Dreamwever yazılı sorusu

21,906 okuma,

Dreamwever Yazılı Sorusu
Bindings Paneli

Dreamweaver bindings paneli

21,858 okuma,

Bindings Paneli
Adobe Dreamweaver CS3 New CSS Rule penceresi devamı..

21,538 okuma,

Adobe Dreamweaver CS3 New CSS Rule penceresi devamı..
Code format araç çubuğu açıklamaları

21,242 okuma,

Code format araç çubuğu açıklamaları
Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore

21,172 okuma,

Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore
Set Nav Bar Image, Set Text, Showhide Elements, Swap Image, Swap Image Restore

21,033 okuma,

Set Nav Bar Image, Set Text, Showhide Elements, Swap Image, Swap Image Restore
Set Nav Bar Image, Set Text, Show Hide Image, Swap Image, Swap Image Restore

Set nav bar ımage, set text, show hide ımage, swap ımage, swap ımage restore

21,024 okuma,

Set Nav Bar Image, Set Text, Show Hide Image, Swap Image, Swap Image Restore
Database Paneli

Veritabanlarına erişmek

20,890 okuma,

Database Paneli
Datebases Paneli

Resimli anlatım

20,715 okuma,

Datebases Paneli
Behaviors Drap Ap Elements Basic Ve Advanced Menüleri

Ap element sürükleme

20,659 okuma,

Behaviors Drap Ap Elements Basic Ve Advanced Menüleri
Snippets Paneli Ve Araçları

Snippets paneli ve araçları

20,448 okuma,

Snippets Paneli Ve Araçları
Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore

Set nav bar image, set text, show hide elements, swap image, swap image restore

20,372 okuma,

Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore
Dreamwever Bindings Paneli

20,298 okuma,

Dreamwever Bindings Paneli
Bindings Paneli

Veri bağlantılarının yönetildiği panel

20,104 okuma,

Bindings Paneli
Named Anchor

Named anchor aracı ile ilgili açıklamalar

20,058 okuma,

Named Anchor
Dreamweaver ile Site tanımlamaları

Dreamweaver birçok geliştirme ortamında olduğu gibi proje bazlı çalışmalar yapmaya olanak tanıyan bir yazılımdır. Bu makalede projelerimizi DW içerisinde nasıl yönetebileceğimizi göreceğiz

19,926 okuma,

Dreamweaver ile Site tanımlamaları
ASP sayfası hazırlama

Dreamweaver mx de ASP çalışmak için daha önceden ASP ile uğraşmış olmak gereklidir. Her nekadar Dreamweaver Mx işimizi kolaylaştırsa da ASP 'den anlamak bazı durumlarda faydalı olacaktır. ASP öğrenmek için Dr. Hakkı ÖCAL 'ın ASP kitaplarını tavsiye ederim

19,833 okuma,

ASP sayfası hazırlama
Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Çalışmak

Belirlediğiniz alanlara fare gelince o alanla ilgili daha büyültülmüş bir resmi ekrana çıkaran uygulama

19,298 okuma,

Dreamweaver Behaviors Kullanarak Bir Resim Üzerindeki Map İle Çalışmak
Behaviors Effects Menüsü

19,240 okuma,

Behaviors Effects Menüsü
Yükleniyor...
Yükleniyor...