Hai jumpa kembali di Tutorial Dreamweaver mempercantik halaman website
kita dengan kolaborasi CSS dan dreamweaver. Pada tutorial belajar Dreamweaver
kali ini penulis akan menjelaskan bagaimana cara memasukkan Rollover
Image. Apa yang dimaksud rollover image? Rollover image adalah suatu
image / gambar yang dilengkapi dengan script di dalamnya sehingga
sewaktu gambar (gambar utama/default) itu disorot dengan kursor maka
gambar tersebut akan berganti dengan gambar yang lain (gambar kedua)...
Contohnya:
Ini preview'a..
Jika mungkin belum jelas maka silahkan saja coba ikuti pembuatannya
dulu, maka siapa tahu nanti jadi lebih jelas apa yang dimaksudkan di
atas
Dan seperti ini cara'a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa menggunakan tampilan
Split maupun
Code, tp saya terbiasa menggunakan tampilan
code)
2.
kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara tag
<body></body> dengan menggunakan sebuah div tag dengan nama element menggunakan class atau id..
(di sini saya menggunakan element class)
berikut kode tag'a..
tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa ada style apapun..
dan berikut kode css yang ditaruh di antara tag <head></head>
#ffffff adalah bilangan hexadecimal untuk warna putih
yang digunakan sebagai warna background..(saya menggunakan warna putih
karena di halaman preview berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x dan 0 kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari
gambar..no-repeat berarti tidak menggunakan perulangan..jika kalian
ingin menggunakan perulangan..gunakan repeat-x untuk perulangan
horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk
memperlihatkan gambar dari tulisan link yang ada..(saya menggunakan 20px
karena lebar dari gambar adalah 15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup
gunakan ":hover" setelah nama tag atau nama class atau nama id.. (tanpa
kutip)
Cara Lainnya::
Bagi yang masih kebingungan dengan permainan Tag dan CSS jangan kuatir
karena ada cara alternatif dalam menampilkan rollover image karena di
dalam aplikasi dreamweaver telah disediakan :)
1. Buka aplikasi Dreamweaver
2. Pilih
Insert >> Image Objects >> Rollover Image
3. Maka akan muncul pop up yang harus anda lengkapi
Penjelasan:
Image name: adalah nama / judul Rollover image anda (isi sesuka anda)
Original image: gambar utama/default Rollover image
Rollover image: gambar kedua (gambar yang akan muncul saat kursor disorot)
Arternate text : adalah penjelasan tentang gambar tersebut mengenai apa (boleh dikosongi/ boleh diisi sesuka anda)
When Clicked, Go to URL: isi dengan URL link yang anda inginkan, bisa web anda, atau paman google
Nah setelah selesai Klik OK, mudah bukan, sekarang coba buka halaman
yang anda buat dengan browser anda (IE, Mozzila, Opera) whatever... yang
penting minumnya teh sak kotaknya... wkwkwk
:P
Just pudding
Semoga Bermanfaat ^_^
pada Tool Box
