Gambar Berpindah Oleh Gerakan Mouse

Sekedar variasi dalam menampilkan image pada blog, tips ini merupakan cara menampilkan image yang apabila disorot oleh mouse, kemudian digeserkan/drag, maka image tersebut akan bergerak mengikuti arah mouse.
Mungkin trik ini tidak terlalu penting untuk ditampilkan pada blog. Tapi tidak ada salahnya kalau dicoba untuk tampil pada blog anda, sekedar variasi dari tampilan gambar yang mungkin dapat menarik mnat tamu blog anda untu memindahkan gambar tersebut.

LANGKAH PERTAMA

1. Masuk ke Blogger dengan ID anda
2. Masuk Rancangan
3. Pilih Edit HTML
4. Cari kode </head> pada template anda
5. Copy kode dibawah ini, kemudian paste tepat diatas kode tadi
   
   
   
   <style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>;
6. Klik Simpan Template

LANGKAH KEDUA

1. Langkah kedua ini bisa anda terapkan pada postingan maupun pada elemen halaman
2. Tambahkan kode class="drag" pada alamat gambar
3. Perhatikan contoh dibawah ini (perhatikan yang berwarna merah.
   
   <img src="http://img52.imageshack.us/img52/3915/36261.gif" class="drag"/>

---

Semoga Artikel Saya Kali Ini Bermanfaat Bagi Sobat

Gambar Berpindah Oleh Gerakan Mouse 9out of 10 based on 10 ratings. 9 user reviews.