Release the cursor banner

Forums: Web Development
Email this Topic • Print this Page

There's an interesting story behind this post. Well its not so much interesting as it is, well, not interesting. Anyway so I was reading on NetTalk about the release the cursor banner which was in circulation on WorldBE to promote the sites.

Quote:

The only way to really look at it is to see the code behind it. Its totally not so I can copy it .

This was followed up by the post...

Quote:

I don't mind sharing the code, but with one lil'condition. Ask for it on my site.

So I arrived here to request the code for it. Thanks.

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 1 • Views: 1,434 • Replies: 4

No top replies

As promised:

Code:

<html>

<head>

<style type="text/css">

<!--

/* General page style */

font,p{font:12px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif}

.fade{font-size:22px;text-decoration:underline;font-weight:bold;color:#0033CC}

.text{font-size:12px;text-decoration:none}

a.fade:hover{color:#FF6600}

.adby{font-size:12px;color:#ecf0f6;text-decoration:none}



-->

</style>

<script language="JavaScript" src="fade.js"></script>

<title>Able2Know</title>

<base target="_top">

</head>

<body>

<table border="0" width="468" height="60" cellspacing="0" cellpadding="0">

<tr>

<td>

<table border="1" width="100%" bordercolor="#0033CC" cellspacing="0" cellpadding="0" height="100%" id="myexample">

<tr>

<td width="100%">

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="1">

<tr>

<td bgcolor="#FF0000" onMouseOver=this.style.backgroundColor="ecf0f6" onMouseOut=this.style.backgroundColor="" onclick="top.location.href='http://www.able2know.com/forums/profile.php?mode=register&agreed=true&ruid=4531'" height="100%">

  <p align="center"> <a href="http://www.able2know.com/forums/profile.php?mode=register&agreed=true&ruid=4531" class="fade" target="_top">Release

  the Cursor! Join the #1 Forum!</a><br>

  </p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<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;//ok!

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();// onUnload="opener.gO()"

edges();

}



if (document.all||document.layers)

window.onload=starteffect

</script>

</body>

</html>

0 Replies

Here is a frame you can use to test the ad, you will need to get the text just right or the banner will have scroll bars:

Code:

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>New Page 1</title>

</head>



<body>

<IFRAME SRC="ad.html" TITLE="The Famous Cursor" WIDTH=468 HEIGHT=60 FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0>

</IFRAME>

</body>



</html>

And here is the cursor:

http://www.able2know.com/advertising/cursor.gif

0 Replies

I forgot one more file: this is fade.js

Code:

/************* 

**** <config> 

**/ 

startColor = "#0033CC"; // MouseOut link color 

endColor = "#FF6600"; // MouseOver link color 



stepIn = 20; // delay when fading in 

stepOut = 50; // delay when fading out 



/* 

** set to true or false; true will 

** cause all links to fade automatically 

***/ 

autoFade = false; 

/* 

** set to true or false; true will cause all CSS 

** classes with "fade" in them to fade onmouseover 

***/ 

sloppyClass = true; 

/** 

**** </config> 

**************/ 

/************* 

**** <install> 

** 

** 

**** </install> 

**************/ 



hexa = new makearray(16); 

for(var i = 0; i < 10; i++) 

hexa[i] = i; 

hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 

hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 



document.onmouseover = domouseover; 

document.onmouseout = domouseout; 



startColor = dehexize(startColor.toLowerCase()); 

endColor = dehexize(endColor.toLowerCase()); 



var fadeId = new Array(); 



function dehexize(Color){ 

var colorArr = new makearray(3); 

for (i=1; i<7; i++){ 

for (j=0; j<16; j++){ 

if (Color.charAt(i) == hexa[j]){ 

if (i%2 !=0) 

colorArr[Math.floor((i-1)/2)]=eval(j)*16; 

else 

colorArr[Math.floor((i-1)/2)]+=eval(j); 

} 

} 

} 

return colorArr; 

} 



function domouseover() { 

if(document.all){ 

var srcElement = event.srcElement; 

if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 

fade(startColor,endColor,srcElement.uniqueID,stepIn); 

} 

} 



function domouseout() { 

if (document.all){ 

var srcElement = event.srcElement; 

if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 

fade(endColor,startColor,srcElement.uniqueID,stepOut); 

} 

} 



function makearray(n) { 

this.length = n; 

for(var i = 1; i <= n; i++) 

this[i] = 0; 

return this; 

} 



function hex(i) { 

if (i < 0) 

return "00"; 

else if (i > 255) 

return "ff"; 

else 

return "" + hexa[Math.floor(i/16)] + hexa[i%16];} 



function setColor(r, g, b, element) { 

var hr = hex(r); var hg = hex(g); var hb = hex(b); 

element.style.color = "#"+hr+hg+hb; 

} 



function fade(s,e, element,step){ 

var sr = s[0]; var sg = s[1]; var sb = s[2]; 

var er = e[0]; var eg = e[1]; var eb = e[2]; 



if (fadeId[0] != null && fade[0] != element){ 

setColor(sr,sg,sb,eval(fadeId[0])); 

var i = 1; 

while(i < fadeId.length){ 

clearTimeout(fadeId[i]); 

i++; 

} 

} 



for(var i = 0; i <= step; i++) { 

fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + 

step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ 

")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); 

} 

fadeId[0] = element; 

}

0 Replies

And if anyone wants to know what the heck we are talking about, it's this rich media banner:

http://www.able2know.com/advertising/example.html

Running the banner a few thousand times generated no members, but offering the code did. Kinda ironic.

Lemme know if you need help tweaking it.

0 Replies

Release the cursor banner

Related Topics

Quick Links

My Account

able2know