Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating a Roaming cursor on a Web Page.

Author: DevASP
Download Source Code : 643_MovingCursor.zip

This article is about how you can display a second, "roaming" cursor on your page with this fun animation. An image resembling the mouse cursor wonders around the screen,...

The image is customizable, so a cursor is certainly not the only thing you can instruct to roam. DHTML programmers.

 

Steps that you will do.

 

Start visual studio and create a new web application.

Open the HTML source code of your web page and add the following line of code in the body of HTML code.

 

  

<body MS_POSITIONING="GridLayout">

<form id="Form1" method="post" runat="server">

<script language="JavaScript1.2">

 

//specify path to cursor image

var cursorpath="cursor.gif"

 

if (document.layers)

{document.write("<LAYER NAME='PoInTeRs' LEFT=10 TOP=10><img src='"+cursorpath+"' width=17 height=22></LAYER>")}

else if (document.all){document.write("<div id='pOiNtErS' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img src='"+cursorpath+"' width=17 height=22></div>")}

 

count=-1;                                                    

move=1;

 

function Curve(){

abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)

for (i=0; i < abc.length; i++)

{var C=Math.round(Math.random()*[i])}

howbend=abc[C];

setTimeout('Curve()',1900);

return howbend;

}

ypos=10;

xpos=10;

 

degree = 60;

function MoveRandom(){

PathBend=degree+=howbend;

y = 4*Math.sin(PathBend*Math.PI/180);

x = 6*Math.cos(PathBend*Math.PI/180);

if (document.layers){

ypos+=y;

xpos+=x;

document.PoInTeRs.top=ypos+window.pageYOffset;

document.PoInTeRs.left=xpos+window.pageXOffset;

}

else if (document.all){

ypos+=y;

xpos+=x;

document.all.pOiNtErS.style.top=ypos+document.body.scrollTop;

document.all.pOiNtErS.style.left=xpos+document.body.scrollLeft;

}

T=setTimeout('MoveRandom()',50);

}

function edges(){

if (document.layers){

if (document.PoInTeRs.left >= window.innerWidth-40+window.pageXOffset)degree=Math.round(Math.random()*45+157.5);

if (document.PoInTeRs.top >= window.innerHeight-30+window.pageYOffset)degree=Math.round(Math.random()*45-112.5);

if (document.PoInTeRs.top <= 2+window.pageYOffset) degree = Math.round(Math.random()*45+67.5);//OK!

if (document.PoInTeRs.left <= 2+window.pageXOffset) degree = Math.round(Math.random()*45-22.5);//OK!

}

else if (document.all)

{

if (document.all.pOiNtErS.style.pixelLeft >= document.body.offsetWidth-45+document.body.scrollLeft)degree=Math.round(Math.random()*45+157.5);

if (document.all.pOiNtErS.style.pixelTop >= document.body.offsetHeight-35+document.body.scrollTop)degree=Math.round(Math.random()*45-112.5);

if (document.all.pOiNtErS.style.pixelTop <= 2+document.body.scrollTop) degree = Math.round(Math.random()*45+67.5);//OK!

if (document.all.pOiNtErS.style.pixelLeft <= 2+document.body.scrollLeft) degree = Math.round(Math.random()*45-22.5);//OK!

}

setTimeout('edges()',100);

}

function starteffect(){

Curve();

MoveRandom();

edges();

}

 

if (document.all||document.layers)

window.onload=starteffect

</script>

<center><h3>Dont forget to visit devasp.com<br>

<a href="http://www.devasp.com">devap</a></h3>

</center>

</form>

</body> 

  

Run your application and see the moving cursor on your web page. Images are attached in the attached application. If you have an image with different name, change that in the JavaScript code written above in the application.

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating a Pop up calendar.

Disclaimer - Privacy
© 2002-2017 DevASP.net