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.
Dreamweaver Behaviors örneği:

Öncelikle sayfamızın içine bir Div ekliyoruz.Ardından Div eklediğimiz yere bir resim yerleştiriyoruz.

Resmimizi ekledikden sonra hangi alanın üzerine gelince büyümesini istiyorsak oraya aşağıdaki gibi "image map" ekliyoruz.Ben örnek olarak çitanın kafasını map içerisine aldım.

Resimdeki gibi çitanın kafasını map içerisine aldıktan sonra resmin yanına "Draw AP Div" ekliyoruz ve içerisine çitanın kafasının biraz daha büyük görünen bir resmini ekliyoruz.

Önce AP Div ekliyoruz...

Bu işlemlerin hepsini yaptıktan sonra çitanın kafasına uyguladığımız map i seçip Behaviors dan Effects-Grow/Shrink seçeneğini seçiyoruz aşağıdaki gibi;

Grow/Shrink i seçtikten sonra aşağıdaki değerleri uyguluyoruz."Target Element" kısmını aşağıdaki gibi sizde çitanın kafasını büyütülmüş halini koyduğumuz AP Div i seçiniz.

Efektimizi verdikten sonra Behaviors panelinden aşağıdaki gibi Grow/Shrink efektinin yanındaki menüden "onMouseOver" seçeneğini seçiyoruz.

Tüm bu işlemleri uyguladıktan sonra örneğimiz tamamlanmış oldu.Aşağıdaki gibi mouse la çitanın kafasının üzerine geldiğimiz zaman otomatik olarak yanda çitanın kafasının büyütülmüş hali ekrana gelecektir.

Kaynak İbrahim Ülker
Yorumunuzu Ekleyin