06 September 2007

Gambar Animasi mouse

Ini yang mau animasi mouse gambar bergerak? Jadi kalau anda menggerakkan mouse, maka gambar kupu-kupu ikut bergerak. Langkahnya anda harus persiapkan gambar animasi yang memang bergerak. Biasanya gambar tersebut berekstensi Gif. Kalau gak ada anda bisa ambil di mynicespace.cm

Kemudian gambar animasi tersebut anda upload ke situs penyedia gambar gratis, misal photobucket, tentunya anda harus buat account disana. Lalu anda copykan kode berikut ini di kode blogger anda dan letakkan sebelum </HTML>.

<script type="text/javascript">
/*
Image qui suit et regarde la souris
http://www.editeurjavascript.com/scripts/scripts_images_1_66.php

SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
var x = 0;
var y = 0;

if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = Bouge_Image;
}

function Pos_Souris(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}

posX = 0;
posY = 0;
anim = true;
oldpos = "http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif";

function Bouge_Image()
{
if (document.getElementById && anim)
{
posX = posX+(((x-posX)+20)/15);
posY = posY+(((y-posY)+20)/15);
if(posX<x)
newpos='http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif';
else
newpos='http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif';
if(newpos!=oldpos)
{
document.tete.src=newpos;
oldpos=newpos;
}
document.getElementById("teteronde").style.top = posY+"px";
document.getElementById("teteronde").style.left = posX+"px";
tempo = setTimeout("Bouge_Image()", 15)
}
}

if(document.getElementById)
{
document.write('<div id="teteronde" style="position: absolute">');
document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
document.write('<img src="http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaƮtre" />');
document.write('</a>');
document.write('</div>');
}
</script>



<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1479700-7";
urchinTracker();
</script>


Keterangan : Text yang berwarna merah, silahkan anda ganti dengan alamat gambar animasi yang sudah anda upload di photobucket. "Selamat mencoba".


Update Posting :
Karena banyaknya keluhan dari pengunjung dimana kode diatas mempunyai Error (kesalahan), maka berikut ada kode yang bisa digunakan dan perintahnya sangat mudah dan singkat. Tetapi gambar penunjuk mouse tidak bisa bergerak.  Langkahnya sebagai berikut :
  1. Masuk ke Kode HTML blog anda
  2. Cari kode body { gunakan Ctrl F untuk mencarinya secara cepat.
  3. Setelah ditemukan tambah kode dibawah ini sesudah perintah body {

    cursor:url("http://i191.photobucket.com/albums/z75/masprim/kupu-kupu.gif"),text;

    Yang berwarna coklat ganti dengan gambar dari link penyimpanan gambar anda.
  4. Simpan, dan lihat hasilnya.

    5 comments:

    1. oh ya kodenya uda tak coba pasang tapi, laporannya sperti ada yang keliru dlam kodenya

      ReplyDelete
    2. Mas..rohman..kodenya udah aku perbaiki,silahkan di ulang ya...!!1

      ReplyDelete
    3. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.


      blm bs bos....

      ReplyDelete
    4. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.


      bos blm bs neh comen dr blog ny

      ReplyDelete
    5. masih eror pak!
      dmn ya salahnya??
      ni ILYAS lagi buat blog tempat kerja ni..

      ReplyDelete

    YOUR COMMENTS

    Post Favorit

    Konsistensi

    Konsistensi atau konsisten adalah sesuatu yang dilakukan terus menerus sampai batas waktu yang ditentukan atau tidak ada batas sama sekali....

    Popular Posts

    Author

    Newsletter