Cara Membuat Efek Gambar Bergoyang


Kode buatan dynamicdrive ini membuat gambar
yang kita miliki dapat bergoyang dan seperti
berdansa ke kiri dan kanan bahkan berputar.
Sebagai contoh untuk Anda, coba saja diamkan
cursor Anda di atas gambar yang di bawah ini :




Berikut adalah cara untuk membuatnya, bila
Anda ingin mencoba tutorial ini :

1.   Rancangan -> Tambah Gadget -> HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini :
<div align="center">
<a href="http://syamsudinnamaku.blogspot.com"><img border="0" class="shakeimage" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" src="URL%20gambar%20Anda%20letakkan%20di%20sini" /></a></div>
KETERANGAN :

Gantilah URL blog ini dan URL gambarnya
dengan milik Anda sendiri.

Sesuaikan ukuran width dan heightnya
dengan gambar Anda tersebut.

3.   Kemudian Anda masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.
<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)- 
© Dynamic Drive (www.dynamicdrive.com)
© User: www.syamsudinnamaku.blogspot.com
For full source code, usage terms, and 100's more DHTML scripts.
*/

//configure shake degree (where larger # equals greater shake)
var rector=15

///////DONE EDITTING///////////
var stopit=0 
var a=5

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>
Selamat mencoba dan tetap good luck!

5 komentar:

  1. mau tanya kalo maunya bergetarnya hanya sebentar gimana yah? cuma 2 detik gituu. mohon bantuannnya suhu

    BalasHapus
  2. bila ada kesempatan, dilain waktu apa yg
    menjadi pertanyaan anda sy akan bahas.
    Utk sementara bisa saja anda mencoba
    mengutak-atik nilai angka yg ada pada
    kode htmlnya siapa tau sesuai dgn apa
    yg anda harapkan. selamat mencoba ...

    BalasHapus
  3. makasih sob infonya ,,
    berkunjung ke blog ane gunz-tkj.blogspot.com

    BalasHapus