Cara Cepat Membuat Rollover/Hover Menu dengan Gambar menggunakan Adobe Dreamweaver

Navigasi merupakan hal yang harus diperhatikan dalam membuat situs, selain agar pengguna tidak kebingungan dengan situs yang kita buat, navigasi ini juga haruslah terlihat bagus dan menarik, untuk itu para pengembang sering menggunakan rollover/hover(sorot maka akan berubah) agar navigasi terlihat bagus. Berikut adalah cara mudah membuat rollover/hover menggunakan Adobe Dreamweaver.

Hal yang paling pertama yang harus disiapkan adalah gambar untuk navigasi menu yang akan kita buat misalkan ada 5 pilihan menu (Home, About, Portofolio, Blog dan Contact Us) sehingga saya mempersiapkan 10 gambar dengan format *.png seperti dibawah ini

Apabila sudah siap maka yang selanjutnya disiapkan adalah koding untuk HTML dan CSS, misalkan saya menggunakan 960GridSystem, untuk logo menggunakan grid_3(220px) dan menu menggunakan grid_9(700px, perlu diperhatikan gambar menu yang dibuat haruslah mempunyai panjang yang sama dengan panjang grid yang digunakan), apabila anda belum mengerti menggunakan 960GridSystem anda bisa melihat tutorialnya Menggunakan 960GridSystem dengan Adobe Dreamweaver.

  

Apabila semua file sudah disiapkan, tempatkan kursor di tempat kita akan meletakan rollover/hover image tersebut, setelah itu klik Insert -> Image Objects -> Rollover Images.

 Maka selanjutnya akan keluar menu Insert Rollover Image, isikan Image Name(nama rollover/hover), Original Image(gambar apabila belum disorot), Rollover Image(gambar apabila disorot), Alternate Text(input teks untuk keterangan) dan Go to URL(link ke halaman lain) dan Go to URL(link ke halaman lain), apabila sudah  klik Ok. Coba buka di browser anda dengan menekan tombol F12 dan menu anda sudah bisa di-rollover/hover, selanjutnya adalah memasukan navigasi menu yang lainya.

 

sebelum disorot

 sesudah disorot

apabila semua sudah selesai

Jangan aneh apabila melihat koding tambahan yang sudah otomatis masuk kedalam file HTML, itu adalah koding JavaScript yang dibuat oleh Adobe Dreamweaver untuk meng-rollover/hover gambar yang kita masukan tadi. Hati-hatilah apabila menggunakan JavaScript lainya yang digunakan bersamaan dengan JavaScript yang dibuat otomatis oleh Adobe Dreamweaver, karena bisa saja kedua koding Javascript tersebut bertubrukan sehingga hanya salah satu JavaScript saja yang jalan atau kedua JavaScript tersebut tidak jalan.

Semoga bermanfaat dan selamat mencoba :D