Senin, 17 September 2012

You are here : Home » Ketagihan Javascript, KURSOR, TOP WIDGET 2 » Hidden Follower Cursor Berbeda di Tiap Postingan

Hidden Follower Cursor Berbeda di Tiap Postingan

kursor

Saya pernah bahas tentang cara merubah tampilan kursor yaitu cara mengganti kursor panah dengan gambar, serta cara membuat kursor di ikuti teks.

Sekarang, postingan yang akan saya buat ialah Cara Membuat Hidden Follower Cursor Berbeda di Tiap Postingan.

Sesuai nama judulnya, "Hidden Follower" maka ia akan membuntuti kursor panah dengan jarak yang tidak berdekatan. Tetapi juga tidak terlalu jauh.

Sementara "Berbeda di Tiap Postingan", maka itu artinya sang follower ini bisa kita ganti untuk masing-masing halaman sesuai kehendak kita.

Contohnya begini, untuk halaman yang sedang Agan baca ini kursor nya adalah standar (yaitu kursor panah) tanpa hidden follower.

Tetapi, coba Agan klik yang satu ini. Lihat di situ sambil Agan gerak-gerakin kursornya. Maka akan ada pengikut kursor yang membuntutinya.

Sudah lihat dan tertarik ?? Agan cukup salin ini.

<style type="text/css">
BODY {overflow-x: hidden;}
</style>


<script language="JavaScript1.2">
<!--

/*
Submitted by Marcin Wojtowicz [one_spook@hotmail.com]
Featured on JavaScript Kit Modified by JK to be IE7+/ Firefox compatible
For this and over 400+ free scripts, visit http://ketagihanbaca.blogspot.com
*/

/* by : ketagihanbaca.blogspot.com */

var trailLength = 8 // The length of trail (8 by default; put more for longer "tail")

var path = "
alamat gambar" // URL of your image

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var i,d = 0

function initTrail() { // prepares the script
 images = new Array() // prepare the image array
 for (i = 0; i < parseInt(trailLength); i++) {
  images[i] = new Image()
  images[i].src = path
 }
 storage = new Array() // prepare the storage for the coordinates
 for (i = 0; i < images.length*3; i++) {
  storage[i] = 0
 }
 for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
  document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>')
 }
 trail()
}
function trail() { // trailing function
 for (i = 0; i < images.length; i++) { // for every div/layer
  document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
  document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
  d = d+2
 }
 for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
  storage[i] = storage[i-2]
 }
 d = 0 // reset for future use
 var timer = setTimeout("trail()",10) // call recursively
}
function processEvent(e) { // catches and processes the mousemove event
 if (window.event) { // for IE
  storage[0] = window.event.y+standardbody.scrollTop+10
  storage[1] = window.event.x+standardbody.scrollLeft+10
 } else {
  storage[0] = e.pageY+12
  storage[1] = e.pageX+12
 }
}

 initTrail()
 document.onmousemove = processEvent // start capturing

//-->
</script>


Perhatikan :

Ganti tulisan alamat gambar dengan gambar dari Agan.

Letak pemasangannya ?? Letakkan itu di bagian "HTML" pada halaman membuat postingan. Dan lakukan cara yang sama jika Agan ingin membuat itu di lain postingan.

Selamat mencoba.

13 komentar:

  1. Baru tau saya

    ^_^

    makasih infonya. bertambah lagi pengetahuan saya.

    BalasHapus
  2. Kunjungan siang sahabat - selamat beraktivitas dan semua kegaiatannya dapat berjalan dengan baik

    salam
    rare-angon nakbalibelog

    BalasHapus
  3. menarik sekali sob...ijin coba ya :)

    BalasHapus
  4. MANTAP .... TAPI AKU BELUM COBA ... HEHEHEH :)

    BalasHapus
  5. Harus di coba nih
    Makasih infonya sob :D

    BalasHapus