Tutorial untuk Membuat Gambar Rollover di Dreamweaver

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

• DreamweaverSalah satu versi yang tercantum di atas.
• Gambar asliPastikan untuk mengoptimalkan gambar ini. Ini akan membantu halaman Anda memuat lebih cepat.
• Gambar rolloverGambar ini harus memiliki dimensi yang sama dengan gambar aslinya. Dan, seperti gambar aslinya, harus dioptimalkan untuk membantu waktu memuat halaman.
• Halaman webIni adalah halaman HTML di mana Anda akan menempatkan gambar rollover Anda.

Memulai

1. Mulai Dreamweaver
2. Buka halaman web di mana Anda ingin rollover Anda

Masukkan Objek Gambar Rollover

Dreamweaver mempermudah pembuatan gambar rollover.

1. Buka menu Sisipkan dan turun ke Objek Gambar sub-menu.
2. Memilih Rollover gambar atau Gambar Rollover.

Beberapa versi Dreamweaver yang lebih tua menyebut Objek Gambar sebagai "Gambar Interaktif" sebagai gantinya.

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.

Saat Diklik, Buka 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. Tetapi opsi ini tidak diperlukan untuk membuat rollover.

Setelah Anda menyelesaikan semua bidang, klik baik agar Dreamweaver membuat gambar rollover Anda.

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 ()

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)"

Uji Rollover

Lihat gambar rollover yang berfungsi penuh dan pelajari apa yang ada di pikiran Shasta.