Gambar rollover adalah gambar yang berubah ke beberapa gambar lain saat Anda atau pelanggan Anda menggulirkan mouse ke atasnya. Ini biasanya digunakan untuk menciptakan nuansa interaktif seperti tombol atau tab. Tetapi Anda dapat membuat gambar rollover hanya dari apa saja.
Tutorial ini dirancang untuk membantu Anda membuat gambar rollover di Dreamweaver . Ini dimaksudkan untuk digunakan oleh orang yang menggunakan Dreamweaver versi berikut:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Persyaratan untuk Tutorial ini
- Dreamweaver
Salah satu versi yang tercantum di atas. - Gambar asli
Pastikan untuk mengoptimalkan gambar ini. Ini akan membantu halaman Anda memuat lebih cepat. - Gambar rollover
Gambar ini harus memiliki dimensi yang sama dengan gambar aslinya. Dan, seperti gambar aslinya, harus dioptimalkan untuk membantu waktu memuat halaman. - Halaman web
Ini adalah halaman HTML di mana Anda akan menempatkan gambar rollover Anda.
01 06
Memulai
- Mulai Dreamweaver
- Buka halaman web di mana Anda ingin rollover Anda
02 06
Masukkan Rollover Image Image Object
Dreamweaver mempermudah pembuatan gambar rollover.
- Buka menu Sisipkan dan turun ke sub-menu “Gambar Objek”.
- Pilih "Rollover gambar" atau "Gambar rollover"
Beberapa versi Dreamweaver yang lebih tua menyebut Objek Gambar sebagai "Gambar Interaktif" sebagai gantinya.
03 06
Katakan Dreamweaver Apa Gambar yang Digunakan
Dreamweaver membuat kotak dialog dengan bidang yang perlu Anda isi untuk membuat gambar rollover Anda.
Nama Gambar
Pilih nama gambar yang unik untuk halaman. Itu harus semua satu kata, tetapi Anda dapat menggunakan angka, garis bawah (_) dan tanda hubung (-). Ini akan digunakan untuk mengidentifikasi gambar untuk berubah.
Gambar asli
Ini adalah URL atau lokasi gambar yang akan mulai di halaman. Anda dapat menggunakan URL jalur relatif atau absolut di bidang ini. Ini harus berupa gambar yang ada di server web Anda atau Anda akan mengunggahnya dengan halaman.
Gambar Rollover
Ini adalah gambar yang akan muncul ketika Anda mengarahkan mouse ke gambar. Sama seperti gambar asli, ini bisa menjadi jalur absolut atau relatif ke gambar, dan itu harus ada atau diunggah ketika Anda mengunggah halaman.
Gambar Rollover Preload
Opsi ini dipilih secara default karena membantu rollover muncul lebih cepat. Dengan memilih untuk memuat gambar rollover, browser Web akan menyimpannya dalam cache sampai mouse berguling di atasnya.
Teks alternatif
Teks alternatif yang bagus membuat gambar Anda lebih mudah diakses. Anda harus selalu menggunakan beberapa jenis teks alternatif saat menambahkan gambar apa pun.
Ketika Diklik, Go To URL
Kebanyakan orang akan mengklik gambar ketika mereka melihat satu di halaman. Jadi Anda harus terbiasa membuat mereka dapat diklik. Opsi ini memungkinkan Anda untuk menentukan halaman atau URL untuk membawa penampil ke ketika mereka mengklik pada gambar. Namun opsi ini tidak diperlukan untuk membuat rollover.
Setelah Anda menyelesaikan semua bidang, klik OK untuk membuat Dreamweaver membuat gambar rollover Anda.
Halaman selanjutnya menunjukkan naskah yang ditulis oleh Dreamweaver.
04 06
Dreamweaver Menulis JavaScript untuk Anda
Jika Anda membuka halaman dalam tampilan kode, Anda akan melihat bahwa Dreamweaver menyisipkan blok JavaScript di
dokumen HTML Anda. Blok ini mencakup 3 fungsi yang Anda perlukan untuk memindahkan gambar ketika mouse berguling di atasnya dan fungsi preload jika Anda memilih untuk itu.fungsi MM_swapImgRestore ()
fungsi MM_findObj (n, d)
fungsi MM_swapImage ()
fungsi MM_preloadImages ()
05 06
Dreamweaver Menambahkan HTML untuk Rollover
Jika Anda memilih untuk memiliki Dreamweaver preload gambar rollover, maka Anda akan melihat kode HTML di badan dokumen Anda untuk memanggil skrip preload sehingga gambar Anda memuat lebih cepat.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver juga menambahkan semua kode untuk gambar Anda dan menautkannya (jika Anda memasukkan URL). Bagian rollover ditambahkan ke tag anchor sebagai onmouseover dan onmouseout atribut.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 06
Uji Rollover
Lihat gambar rollover yang berfungsi penuh dan pelajari apa yang ada di pikiran Shasta.