Kamis, 29 September 2011

OnmouseOver Trick

Sekarang mari kita bermain dengan cursor. Pada CSS kita mengenal dengan istilah hover. Dimana memberikan efek jika cursor didekatkan ke object yang dituju. Pada JavaScript dikenal dengan onmouseover Event. Begitu kira-kira...:D Jelasnya saya juga tidak mengerti, tapi Beben Koben si bloglang anu ganteng kalem tea akan berbagi sedikit trik sederhana menggunakan attribute onmouseover ;)
Perhatikan contoh sederhana berikut ini, arahkan mouse ke gambar!

Terjadi 3 perubahan gambar dalam sekali tagging? Namun itu bisa diutak-atik lagi dengan sedikit membubuhkan bumbu-bumbu CSS agar menghasilkan satu karya unique style :P
Lama tidak berkunjung ke master @dotnetfreak pembuat blogger page views post view hit counter to count views of post/page. Dari sanalah trik onmouseover Koben dapatkan ;)) :"> (tengok disisi kanannya)
<style>
.cicing {
bottom: 10px;
position: fixed;
right: 0;
z-index: 1;
}
</style>

<div class="cicing" id="serelek"><a href="javascript:void(0);" onmouseover="getfungsi();"><img alt="" class="imgfloat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rOy_uxqLvBlTs1lWdQ34RLGQWHWLhJGtlUPKWCHUFX0Ks_NvKhwWv3SrKihPP2v2bvj-vklzaukh6hxPhbZCrkMx0XeLG8Q99LCg2MelTktLToBJgQR2He3rYhEVyEyyxXPZHVFb9mfK/"/></a></div><script type="text/javascript">function nyengsol() { if (document.getElementById("serelek") != null ) { getfungsi(); } } YAHOO.util.Event.onContentReady("nyengsol");function closefeed() { if (document.getElementById("serelek") != null) { document.getElementById("serelek").innerHTML = "<a href='javascript:void(0);' onmouseover='getfungsi();'><img alt='' class='imgfloat' src='http://1.bp.blogspot.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/engsel.png'/></a>"; }}function getfungsi() { if (document.getElementById("serelek") != null) document.getElementById("serelek").innerHTML = "<iframe src='https://www.facebook.com/plugins/likebox.php?colorscheme=dark&header=true&height=500&href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-for-Stylish-Blogger%2F122292581115426&show_faces=true&stream=true&width=300' scrolling='no' frameborder='0' style='overflow:hidden; width:300px; height:500px;background:#f4f4f4;'></iframe><a href='javascript:void(0)' onmouseover='closefeed();'><span id='closebutton' style='position:absolute;left:0px;top:0px;margin-top:-15px;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbJSmP0WdQ3lq-xjPIVBslBrO_Hh0zujxMH3lwPgnbXH1Q4q8OCZvFgNjN7FdBBpN3pfak6SjEfBSCs-6gs9TErUYLioS2RSt_8L0CdkoXRJ1Qrt02VvHgixxp9gWT0kYrOIx6v8vFlFj/' /></span></a>";}</script></div>
Masukan semua ramuan via Add a GadgetHTML/JavaScript

Karena pemanggilan menggunakan variabel iframe jadi harus berupa anchor links yah. Contoh diatas Koben memasukan link anchor FB stream. Jika mau masukin shoutmix/cbox yaaa link anchornya saja ambil :D
Demonya kalau blon dihapus ada di Embah Google (lihat kanan bawah)
Good luck \m/

Tidak ada komentar:

Posting Komentar