Cara Membuat Gambar Rollover Sederhana di Dreamweaver - dummies

Rollover adalah fitur populer yang Dreamweaver menyertakan kotak dialog khusus hanya untuk rollover: kotak dialog Insert Rollover Image. Gambar bergulir, 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.

Anda dapat membuat efek gambar rollover yang lebih kompleks dengan opsi Swap Image dari panel Behaviors. Pilihan Swap Image memungkinkan Anda mengubah beberapa gambar secara bersamaan.

Untuk membuat efek rollover sederhana dengan dua gambar menggunakan kotak dialog Insert Image Rollover Dreamweaver, ikuti langkah-langkah ini:

1. Tempatkan kursor pada halaman yang Anda inginkan agar rollover muncul.

   Efek rollover memerlukan setidaknya dua gambar: satu untuk keadaan awal dan satu untuk keadaan rollover. Anda bisa menggunakan dua gambar yang berbeda atau dua yang serupa, namun keduanya harus memiliki dimensi yang sama. Jika tidak, Anda melihat efek penskalaan aneh karena kedua gambar harus ditampilkan di ruang yang sama persis pada halaman.

2. Pilih Insert → Image → Rollover Image.

   Atau, Anda dapat menggunakan daftar drop-down yang tersedia dari ikon Images di panel Common Insert dan pilih Rollover Image.

   Kotak dialog Insert Rollover Image akan muncul.

   

3. Pada 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. Pada kotak Original Image, tentukan gambar pertama yang ingin Anda lihat. Gunakan tombol Browse untuk mencari dan memilih gambar.

   Jika gambarnya belum ada di folder situs lokal Anda, Dreamweaver menyalinnya ke situs Anda saat Anda membuat rollover.

5. Pada kotak Rollover Image, masukkan gambar yang ingin Anda lihat saat pengunjung memindahkan kursor ke 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 kursor digulung di atas gambar aslinya.

7. Di kolom Teks Alternatif, masukkan deskripsi gambar.

   Teks alternatif bersifat opsional namun disarankan karena penggunaan kata kunci dapat meningkatkan pengoptimalan mesin telusur.Demikian pula, teks alternatif adalah bagian penting dari aksesibilitas web karena teks ini dibaca dengan keras oleh peramban khusus yang disebut pembaca layar, yang digunakan oleh orang-orang yang buta dan orang lain yang memiliki penglihatan terbatas atau mobilitas. Teks alternatif hanya ditampilkan di browser jika gambar tidak terlihat.

8. Di kotak Klik Ketika Diklik, Masuk ke URL, masukkan alamat web atau jelajahi untuk menemukan halaman lain di situs Anda yang ingin Anda tautkan.

   Jika Anda tidak menentukan URL, Dreamweaver secara otomatis memasukkan tanda # sebagai pengganti kode.

   Tanda # adalah teknik umum untuk membuat tautan yang tidak ada link di manapun. Karena gambar rollover yang tidak terhubung ke halaman lain memiliki banyak kegunaan yang hebat, teknik ini berguna. Ingatlah bahwa jika Anda ingin agar rollover Anda terhubung, Anda perlu mengganti tanda # dengan link ke halaman lain.

9. Klik OK.

   Gambar diatur secara otomatis sebagai rollover.

10. Untuk melihat aksi rollover, simpan file dan kemudian klik ikon globe di bagian atas ruang kerja untuk melihat pratinjau halaman Anda di browser web.

Anda dapat melihat bagaimana rollover Anda bekerja dalam tampilan Desain Dreamweaver atau dengan menggunakan opsi Live view. Saat Anda mengeklik tombol Langsung di bagian kiri atas ruang kerja, pada dasarnya Anda menghidupkan Dreamweaver ke browser web yang menampilkan halaman seperti browser Chrome.

Saat melihat pratinjau halaman di komputer Anda yang menyertakan gambar rollover, beberapa peramban web akan menampilkan peringatan yang menyatakan bahwa Anda harus mengizinkan kontrol ActiveX untuk melihat halaman tersebut. Ini adalah peringatan keamanan yang muncul hanya saat halaman dibuka pada komputer yang sama tempat halaman disimpan.

Jika Anda mempublikasikan halaman ke server web dan kemudian melihatnya melalui koneksi Internet, Anda dan pengunjung situs Anda tidak akan melihat kesalahan ini.

Kredit: Artwork oleh istockphoto. com