The HTML Source for the Demo Page Follows
<![CDATA[
<HTML>
<HEAD>
<TITLE>Lucio Tavernini - Sparkling Cursor Demo</TITLE>
<SCRIPT SRC="./sparkler/sparkler.js"></SCRIPT>
</HEAD>
<BODY BGCOLOR=000000>
<DIV ID=sprite1 STYLE="POSITION: absolute; HEIGHT: 40px; WIDTH: 40px; VISIBILITY: hidden">
<IMG NAME=pic1 SRC="./sparkler/star1.gif" HEIGHT=40 WIDTH=40 BORDER=0>
</DIV>
<DIV ID=sprite2 STYLE="POSITION: absolute; HEIGHT: 40px; WIDTH: 40px; VISIBILITY: hidden">
<IMG NAME=pic2 SRC="./sparkler/star2.gif" HEIGHT=40 WIDTH=40 BORDER=0>
</DIV>
<DIV ID=sprite3 STYLE="POSITION: absolute; HEIGHT: 40px; WIDTH: 40px; VISIBILITY: hidden">
<IMG NAME=pic3 SRC="./sparkler/star3.gif" HEIGHT=40 WIDTH=40 BORDER=0>
</DIV>
<DIV ID=sprite4 STYLE="POSITION: absolute; HEIGHT: 40px; WIDTH: 40px; VISIBILITY: hidden">
<IMG NAME=pic4 SRC="./sparkler/star4.gif" HEIGHT=40 WIDTH=40 BORDER=0>
</DIV>
<DIV ID=sprite5 STYLE='POSITION: absolute; HEIGHT: 40px; WIDTH: 40px; VISIBILITY: hidden'>
<IMG NAME=pic5 SRC="./sparkler/star5.gif" HEIGHT=40 WIDTH=40 BORDER=0>
</DIV>
<DIV ID=sprite6 STYLE='POSITION: absolute; HEIGHT: 40px; WIDTH: 40px; VISIBILITY: hidden'>
<IMG NAME=pic6 SRC="./sparkler/star6.gif" HEIGHT=40 WIDTH=40 BORDER=0>
</DIV>
<DIV STYLE="cursor: default;">
</DIV>
</BODY>
</HTML>
]]>
The JavaScript Code Follows
<![CDATA[
// sparkler.js
// Attach a sparkler to the cursor.
// Sprite Constants
var NUMBER_OF_SPRITES = 6
var X_OFFSET = -8
var Y_OFFSET = 8
var ANIMATION_INTERVAL_IN_MS = 50
// Begin: Initialization
// Browser Detection
var usingNS4 = document.layers
var usingIE = document.all
var usingMozilla = document.getElementById && !document.all
// Browser Dependencies
var layerRef = usingNS4 ? "document" : "document.all"
var styleRef = usingNS4 ? "" : ".style"
// Sprite Array (Requires star1.gif, ..., star<NUMBER_OF_SPRITES>.gif)
var spriteArray = new Array();
for (k = 1; k <= NUMBER_OF_SPRITES; k++) {
eval("sprite" + k + " = new Image")
eval("sprite" + k + ".src = './sparkler/star" + k + ".gif'")
}
for (k = 0; k < NUMBER_OF_SPRITES; k++) spriteArray[k] = new spriteObj(k + 1)
// Capture Mouse Handler
if (usingMozilla) document.addEventListener("mousemove", mouseMoveEventHandler, true)
if (usingIE) document.onmousemove = mouseMoveEventHandler
else if (usingNS4) {
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = mouseMoveEventHandler
}
window.setInterval("animate()", ANIMATION_INTERVAL_IN_MS)
// End: Initialization
// The sprite Object
function spriteObj(id) {
this.id = id
this.sprite = "sprite" + id
this.pic = "pic" + id
this.doAnimationStep = doAnimationStep
}
// Method
function doAnimationStep() {
if (this.id <= NUMBER_OF_SPRITES) {
if (usingNS4)
eval("document." + this.sprite + ".document['" + this.pic + "'].src = sprite" + this.id + ".src")
else if (usingIE)
eval("document['" + this.pic + "'].src = sprite" + this.id + ".src")
else if (usingMozilla) {
document.getElementById(this.sprite).src = this.sprite
}
this.id++
}
else {
if (usingNS4) eval("document." + this.sprite + '.visibility = "hidden"')
else if (usingIE) eval("document.all." + this.sprite + '.style.visibility = "hidden"')
else if (usingMozilla) document.getElementById(this.sprite).style.visibility = "hidden"
}
}
function animate() {
for (k = 0; k < NUMBER_OF_SPRITES; k++)
spriteArray[k].doAnimationStep()
}
function mouseMoveEventHandler(e) {
rotatedSprites = rotateSprites()
if (usingNS4) {
eval("document." + rotatedSprites + ".left = e.pageX + " + X_OFFSET)
eval("document." + rotatedSprites + ".top = e.pageY + " + Y_OFFSET)
}
else if (usingIE) {
eval("document.all." + rotatedSprites + ".style.pixelLeft = event.clientX + document.body.scrollLeft + " + X_OFFSET)
eval("document.all." + rotatedSprites + ".style.pixelTop = event.clientY + document.body.scrollTop + " + Y_OFFSET)
}
else if (usingMozilla){
document.getElementById(rotatedSprites).style.left = e.pageX + X_OFFSET
document.getElementById(rotatedSprites).style.top = e.pageY + Y_OFFSET
}
}
function rotateSprites() {
oldTop = spriteArray[NUMBER_OF_SPRITES - 1]
for (k = NUMBER_OF_SPRITES - 1; k > 0; k--) {
spriteArray[k] = spriteArray[k - 1]
spriteArray[k].id = k + 1
}
spriteArray[0] = oldTop
spriteArray[0].id = 1
if (usingMozilla) document.getElementById(spriteArray[0].sprite).style.visibility = "visible"
else eval(layerRef + '.' + spriteArray[0].sprite + styleRef + '.visibility = "visible"')
return spriteArray[0].sprite
}
]]>
|