Video: TUTORIAL WEB DESAIN PART 3 MEMBUAT ROLLOVER IMAGE UNTUK MAIN MENU 2025
Dalam Dreamweaver, gambar Rollover - sesuai namanya - dirancang untuk bereaksi saat seseorang menggulung kursor di atas gambar. Efeknya bisa sama dramatisnya dengan gambar seekor anjing yang digantikan oleh gambar singa, atau sama halusnya dengan warna sebuah kata yang berubah saat satu gambar menggantikan yang lain. Either way, Dreamweaver menyertakan kotak dialog khusus untuk rollover yang membuat efek rollover sederhana menjadi salah satu perilaku termudah untuk diterapkan.
Untuk membuat gambar rollover dengan menggunakan kotak dialog Insert Image Rollover Dreamweaver, ikuti langkah-langkah ini:
1. Klik untuk menempatkan kursor pada halaman di mana Anda ingin rollover muncul.
Efek rollover memerlukan setidaknya dua gambar: satu untuk keadaan awal dan satu untuk keadaan rollover. Anda dapat menggunakan dua gambar yang berbeda atau dua gambar yang serupa, namun keduanya memiliki dimensi yang sama. Jika tidak, Anda mendapatkan beberapa efek penskalaan aneh karena kedua gambar harus ditampilkan di ruang yang sama persis pada halaman.
2. Pilih Insert -> Image Objects -> Rollover Image.
Kotak dialog Insert Rollover Image akan muncul.
3. Di kotak Image Name, beri nama gambar Anda.
Sebelum Anda dapat menerapkan perilaku pada elemen, seperti gambar, elemen harus memiliki nama sehingga skrip perilaku dapat merujuknya. Anda bisa memberi nama elemen apapun yang Anda suka asalkan Anda tidak menggunakan spasi atau karakter khusus.
4. Di kotak Original Image, tentukan gambar pertama yang ingin Anda lihat. Gunakan tombol Browse untuk mencari dan memilih gambar.
Jika gambarnya belum ada di folder akar situs Anda, Dreamweaver akan menyalinnya ke situs Anda saat Anda membuat rollover.
5. Di kotak Rollover Image, masukkan gambar yang ingin Anda lihat saat pengunjung memindahkan kursor di atas gambar pertama.
Sekali lagi, Anda dapat menggunakan tombol Browse untuk mencari dan memilih gambar.
6. Pilih kotak centang Preload Rollover Image untuk memuat semua gambar rollover ke cache browser saat halaman pertama kali dimuat.
Jika Anda tidak memilih melakukan langkah ini, pengunjung Anda mungkin mengalami penundaan karena gambar kedua tidak akan didownload sampai mouse digulung di atas gambar aslinya.
7. Di kotak Klik Klik, Ke URL, masukkan alamat Web atau telusuri untuk menemukan halaman lain di situs Anda yang ingin Anda tautkan.
Jika Anda tidak menentukan URL, Dreamweaver secara otomatis memasukkan tanda # sebagai placeholder.
8. Klik OK
Gambar secara otomatis diatur sebagai rollover.
9. Klik ikon dunia di bagian atas ruang kerja untuk melihat pratinjau pekerjaan Anda di browser dan uji bagaimana cara kerja rollover.
