Disini kita akan membuat efek pada gambar dengan menggunakan dreamwever cs6
Efek
“mouse-over” terjadi ketika pengguna menggerakkan mouse pointer ke
gambar. Ketika pointer terletak pada gambar, gambar akan berubah menjadi
sesuatu yang lain. Hal ini sangat berguna untuk tombol navigasi.
Dreamweaver 3.0 memiliki perintah mouse-over yang siap anda gunakan.
1. Mulai Dreamweaver
2. Buka menu Insert dan pilih Rollover Image. Sebuah kotak dialog akan muncul.
3. Ketikkan nama gambar yang akan di roll over dalam kotak pertama.
4. Pada kotak berikutnya, ketik lokasi gambar yang akan muncul di halaman. Klik Browse untuk memilih gambar dari hard disk Anda.
5. Pada kotak Image Rollover, ketik lokasi gambar yang akan muncul ketika mouse di atas gambar. Klik Browse untuk memilih gambar dari hard disk Anda.
2. Buka menu Insert dan pilih Rollover Image. Sebuah kotak dialog akan muncul.
3. Ketikkan nama gambar yang akan di roll over dalam kotak pertama.
4. Pada kotak berikutnya, ketik lokasi gambar yang akan muncul di halaman. Klik Browse untuk memilih gambar dari hard disk Anda.
5. Pada kotak Image Rollover, ketik lokasi gambar yang akan muncul ketika mouse di atas gambar. Klik Browse untuk memilih gambar dari hard disk Anda.
6. Jika gambar bisa diklik (menggunakan link), ketik alamat Web di kotak berikutnya. Klik OK.
7. Simpan halaman ketika selesai.
8. Uji mouse-over dengan memilih Pratinjau pada Browser dari menu File. Arahkan mouse Anda di atas gambar untuk melihat hasilnya.
7. Simpan halaman ketika selesai.
8. Uji mouse-over dengan memilih Pratinjau pada Browser dari menu File. Arahkan mouse Anda di atas gambar untuk melihat hasilnya.
Catatan:
- Pastikan kotak Preload Rollover Image dicentang agar gambar yang
digunakan pada mouse-over dimuat ke dalam situs web sebelum pengguna
memiliki kesempatan untuk mengarahkan kursor ke gambar dasar, mengurangi
kemungkinan kesalahan.
- Kedua gambar harus memiliki ukuran yang sama.
- Seperti kebanyakan JavaScripts lainnya, mouse-over tidak dapat bekerja di browser lama. Pengguna hanya akan melihat gambar aslinya.
- Seperti kebanyakan JavaScripts lainnya, mouse-over tidak dapat bekerja di browser lama. Pengguna hanya akan melihat gambar aslinya.
0 komentar:
Posting Komentar