Home » » Gambar Animasi mouse

Gambar Animasi mouse

Written By Parmin Prim on 06 September 2007 | 14.29

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.

    Share this article :

    5 komentar:

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

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

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


      blm bs bos....

      BalasHapus
    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

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

      BalasHapus

    Popular Posts

    Posting Update

    Chat Langsung

    Diberdayakan oleh Blogger.

    Follow by Email

     
    Support : Primaya | Masprim | My Facebook
    Redesain © 2015. primaya.blogspot.co.id - All Rights Reserved
    Template Source from Creating Website
    Proudly powered by Blogger