Beberapa effek image dengan onmouseover dan onmouseout

Javascript MouseOver & MouseOut

Jika pada posting sebelumnya sudah dibahas penggunaan onmouseover dan onmouseout terhadap penggunaan css property yang melibatkan perubahan background, border dan beberapa property css yang lain, untuk kali ini kita akan mencoba menggunakan onmouseover dan onmouseout untuk menciptakan beberapa effek pada gambar posting. Dengan onmouseover dan onmouseout anda dapat merubah image menjadi lebih besar (zoom), membuat transparansi image dan menampilkan 2 atau tiga image dalam satu posisi (tempat).

Effect-1

Dengan floating posisition yang digunakan pada link (tag "a") dan posisi absolute pada image, sebuah image posting dapat dibuat seperti ini. Perubahan ukuran image ketika cursor berada di atas gambar tak akan mempengaruhi posisi atau kedudukan obyek lain disekitarnya. Anda bisa menggunakan model seperti ini hanya menggunakan onmouseover dan onmouseout tanpa perlu menggunakan kode css lain yang harus disimpan dalam template anda. Bagaimana? Praktis, mudah dan menarik, khan?

xHTML Effect-1 :

<a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Mau lihat yang lebih hot? Hoo...hooo ..., jangan malu2... kliiik sekali saja!" style="position:relative;float:left;display:block;margin:5px 15px 5px 0;width:154px;height:154px;"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="position:absolute;left:0;top:0;border:4px solid #555;border-radius:5px;" onmouseover="this.border='4px solid blue';this.style.width='400px';this.style.height='400px';this.style.zIndex='999';this.style.opacity='0.75';this.style.filter.alpha.Opacity='75';" onmouseout="this.src='https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg';this.border='4px solid #333';this.style.width='144px';this.style.height='144px';this.style.zIndex='2';" /></a>Dengan floating posisition yang digunakan pada link (tag "a") dan posisi absolute pada image, sebuah image posting dapat dibuat seperti ini. Perubahan ukuran image ketika cursor berada di atas gambar tak akan mempengaruhi posisi atau kedudukan obyek lain disekitarnya. Anda bisa menggunakan model seperti ini hanya menggunakan onmouseover dan onmouseout tanpa perlu menggunakan kode css lain yang harus disimpan dalam template anda. Bagaimana? Praktis, mudah dan menarik, khan?

Untuk membuat effek pada gambar dengan onmouseover dan onmouseout anda perlu mengetahui cara menuliskan beberapa properti kode css dalam standart penulisan di javascript. Ada cukup banyak properti css ini yang bisa kita gunakan selain beberapa yang dipakai dalam effek ini. Data yang berupa daftar properti css berikut perubahan nama (penulisan) property css tersebut di javascript dapat anda lihat dengan membuka link berikut ini.
Daftar data css property dan cara penulisan dalam javascript.

xHTML Effect-2 :

<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/" target="_blank" title="He... klo yang ini nggak bo'ong, dah! Asli... n...benar2 asli khusus buat sampeyan yang suka ...ehm... ehm ....!!!1" style="position:relative;float:left;display:block;margin:5px 15px 5px 0;width:154px;height:154px;"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="position:absolute;left:0;top:0;border:4px solid #555;border-radius:5px;" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXLK-A0eCkjORm5w2JNAdyfgu6P1aN3I0it9KMEE8Bk6DLMdh6a3SLCpT1JRyjanWNHC2aVX9t3Advw2HavCa_cKGhnI8BBQUCR7BiU4fE_NzpET9GEciOWBDZq6zA22NtjypHdnyMMoY/s200/img_my-girl.jpg';this.border='4px solid blue';this.style.width='225px';this.style.height='300px';this.style.zIndex='999';" onmouseout="this.src='https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg';this.border='4px solid #333';this.style.width='144px';this.style.height='144px';this.style.zIndex='2';" /></a>Untuk membuat effek pada gambar dengan onmouseover dan onmouseout anda perlu mengetahui cara menuliskan beberapa properti kode css dalam standart penulisan di javascript. Ada cukup banyak properti css ini yang bisa kita gunakan selain beberapa yang dipakai dalam effek ini. Data yang berupa daftar properti css berikut perubahan nama (penulisan) property css tersebut di javascript dapat anda lihat dengan membuka link berikut ini.

Ini sebuah contoh yang melibatkan 3 buah image dimana gambar pertama akan terlihat ketika halaman blog dibuka, image kedua terlihat ketika mouse berada di atas image dan gambar ke tiga muncul setelah cursor dilepaskan dari image. Anda dapat melakukan perubahan ukuran gambar melalui kode css yang ada dalam kode html. Ukuran width dan height ini sekaligus akan menjadi ukuran bagi gambar kedua dan ketiga.

xHTML Effect-3 :

<a href="http://lightbox-demo-tutorial.blogspot.com/" title="Image three in one"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="float:left;padding:5px;background:#666;border:2px solid #eee;box-shadow:0 0 8px #000;margin:5px 12px 5px 0;" onmouseover="this.src='https://lh4.googleusercontent.com/-7VV32P3_dEo/T24fYqtEeDE/AAAAAAAAAiA/WqJoPavei1Q/s144-c/BigBackground.jpg';" onmouseout="this.src='https://lh3.googleusercontent.com/-Xrd78mdFfLU/T2kBZoY8FOE/AAAAAAAAAgI/RlxFpwGUpRs/s144-c/GalleryMedium.jpg';" /></a>Ini sebuah contoh yang melibatkan 3 buah image dimana gambar pertama akan terlihat ketika halaman blog dibuka, image kedua terlihat ketika mouse berada di atas image dan gambar ke tiga muncul setelah cursor dilepaskan dari image. Anda dapat melakukan perubahan ukuran gambar melalui kode css yang ada dalam kode html. Ukuran width dan height ini sekaligus akan menjadi ukuran bagi gambar kedua dan ketiga.