The Message Snake

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 402,505 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,772 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

•

Dec 22nd, 2004

Views: 3,891

vegaseat

You probably have seen those message snakes following the cursor on a web page. Well, the javascript code is not too complex, so let's look at it ...

Show Printable Version

•

javascript Syntax |

Toggle Plain Text

<!-- Experiments with style   vegaseat   6/15/2002  -->
 
<html>
<head>
 
<title>Message snake follows cursor</title>
 
<style>
.spanstyle {
  position:absolute;
  visibility:visible;
  top:-50px;
  font-size:8pt;
  font-family:comic sans ms;
  font-weight:bold;
  color:green;
}
</style>	
 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin hide from older browsers
 
// make a message snake to follow the cursor
 
var x,y
var step=20
var flag=0
 
var message = "Holy Fryer! "
message = message.split("")
 
var xpos = new Array()
for (i = 0; i <= message.length-1; i++) {
	xpos[i]=-50
}
 
var ypos = new Array()
for (i = 0; i <= message.length-1; i++) {
	ypos[i]=-50
}
 
function handlerMM(e){
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}
 
function makesnake() 
{
  if (flag == 1 && document.all) {
    for (i = message.length-1; i >= 1; i--) {
   	  xpos[i] = xpos[i-1]+step
	  ypos[i] = ypos[i-1]
    }
	xpos[0] = x+step
	ypos[0] = y
	for (i = 0; i < message.length-1; i++) {
      var thisspan = eval("span" + (i) + ".style")
      thisspan.posLeft = xpos[i]
	  thisspan.posTop = ypos[i]
    }
  }
  else if (flag == 1 && document.layers) {
    for (i = message.length-1; i >= 1; i--) {
   	  xpos[i] = xpos[i-1]+step
	  ypos[i] = ypos[i-1]
    }
	xpos[0] = x+step
	ypos[0] = y
	for (i = 0; i < message.length-1; i++) {
      var thisspan = eval("document.span"+i)
      thisspan.left = xpos[i]
	  thisspan.top = ypos[i]
    }
  }
  var timer = setTimeout("makesnake()", 30)
}
 
for (i = 0; i <= message.length-1; i++) {
  document.write("<span id='span"+i+"' class='spanstyle'>");
  document.write(message[i]);
  document.write("</span>")
}
 
if (document.layers) {
  document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
 
// End  hide from old browsers -->
</script>
 
</head>
<body bgcolor="#CCFF99" text="#330099" onLoad="makesnake()">
 
<H2>Why Did the Chicken Cross the Road?</H2>
<br>
KINDERGARTEN TEACHER: To get to the other side
<br><br>
PLATO: For the greater good.
<br><br>
ARISTOTLE: It is the nature of chickens to cross roads.
<br><br>
KARL MARX: It was a historical inevitability.
<br><br>
TIMOTHY LEARY: Because that's the only trip the establishment could let it
take.
<br><br>
RONALD REAGAN: I forget.
<br><br>
CAPTAIN JAMES T. KIRK: To boldly go where no chicken has gone before.
<br><br>
HIPPOCRATES: Because of an excess of phlegm in its pancreas.
<br><br>
LOUIS FARRAKHAN: The road, you see, represents the black man. The chicken
<br>'crossed' the black man in order to trample him and keep him down.
<br><br>
MARTIN LUTHER KING, JR.: I envision a world where all chickens will be
<br>free to cross roads without having their motives called into question.
<br><br>
MOSES: And God came down from the Heavens, and He said unto the chicken,
<br>"Thou shalt cross the road." And the chicken crossed the road, and there
<br>was much rejoicing.
<br><br>
RICHARD M. NIXON: The chicken did not cross the road. I repeat, the
<br>chicken did NOT cross the road.
<br><br>
FREUD: The fact that you are at all concerned that the chicken crossed
<br>the road reveals your underlying sexual insecurity.
<br><br>
DARWIN: Chickens, over great periods of time, have been
<br>naturally selected in such a way that they are now genetically
<br>dispositioned to cross roads.
<br><br>
EINSTEIN: Whether the chicken crossed the road or the road moved beneath
<br>the chicken depends upon your frame of reference.
<br><br>
BUDDHA: Asking this question denies your own chicken nature.
<br><br>
ERNEST HEMINGWAY: To die. In the rain.
<br><br>
ANDERSEN CONSULTING: Deregulation of the chicken's side of the road was
<br>threatening its dominant market position. The chicken was faced with
<br>significant challenges to create and develop the competencies required
<br>for the newly competitive market. Andersen Consulting, in a partnering
<br>relationship with the client, helped the chicken by rethinking its
<br>physical distribution strategy and implementation processes. Using the
<br>Poultry Integration Model (PIM), Andersen helped the chicken use its
<br>skills, methodologies, knowledge, capital and experiences to align the
<br>chicken's people, processes and technology in support of its overall
<br>strategy within a Program Management framework. Andersen Consulting
<br>convened a diverse cross-spectrum of road analysts and best chickens
<br>along with Anderson consultants with deep skills in the transportation
<br>industry to engage in a two-day itinerary of meetings in order to
<br>leverage their personal knowledge capital, both tacit and explicit, and
<br>to enable them to synergize with each other in order to achieve the
<br>implicit goals of delivering and successfully architecting and
<br>implementing an enterprise-wide value framework across the continuum of
<br>poultry cross-median processes. The meeting was held in a park-like
<br>setting, enabling and creating an impactful environment which was
<br>strategically based, industry- focused, and built upon a consistent,
<br>clear, and unified market message and aligned with the chicken's mission,
<br>vision, and core values. This was conducive towards the creation of a
<br>total business integration solution. Andersen Consulting helped the
<br>chicken change to become more successful.
<br><br>
COLONEL SANDERS: I missed one?
 
</body>
</html>

<!-- Experiments with style   vegaseat   6/15/2002  -->

<html>
<head>

<title>Message snake follows cursor</title>
	
<style>
.spanstyle {
  position:absolute;
  visibility:visible;
  top:-50px;
  font-size:8pt;
  font-family:comic sans ms;
  font-weight:bold;
  color:green;
}
</style>	
	
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin hide from older browsers

// make a message snake to follow the cursor

var x,y
var step=20
var flag=0

var message = "Holy Fryer! "
message = message.split("")

var xpos = new Array()
for (i = 0; i <= message.length-1; i++) {
	xpos[i]=-50
}

var ypos = new Array()
for (i = 0; i <= message.length-1; i++) {
	ypos[i]=-50
}

function handlerMM(e){
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}

function makesnake() 
{
  if (flag == 1 && document.all) {
    for (i = message.length-1; i >= 1; i--) {
   	  xpos[i] = xpos[i-1]+step
	  ypos[i] = ypos[i-1]
    }
	xpos[0] = x+step
	ypos[0] = y
	for (i = 0; i < message.length-1; i++) {
      var thisspan = eval("span" + (i) + ".style")
      thisspan.posLeft = xpos[i]
	  thisspan.posTop = ypos[i]
    }
  }
  else if (flag == 1 && document.layers) {
    for (i = message.length-1; i >= 1; i--) {
   	  xpos[i] = xpos[i-1]+step
	  ypos[i] = ypos[i-1]
    }
	xpos[0] = x+step
	ypos[0] = y
	for (i = 0; i < message.length-1; i++) {
      var thisspan = eval("document.span"+i)
      thisspan.left = xpos[i]
	  thisspan.top = ypos[i]
    }
  }
  var timer = setTimeout("makesnake()", 30)
}

for (i = 0; i <= message.length-1; i++) {
  document.write("<span id='span"+i+"' class='spanstyle'>");
  document.write(message[i]);
  document.write("</span>")
}

if (document.layers) {
  document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// End  hide from old browsers -->
</script>
	
</head>
<body bgcolor="#CCFF99" text="#330099" onLoad="makesnake()">

<H2>Why Did the Chicken Cross the Road?</H2>
<br>
KINDERGARTEN TEACHER: To get to the other side
<br><br>
PLATO: For the greater good.
<br><br>
ARISTOTLE: It is the nature of chickens to cross roads.
<br><br>
KARL MARX: It was a historical inevitability.
<br><br>
TIMOTHY LEARY: Because that's the only trip the establishment could let it
take.
<br><br>
RONALD REAGAN: I forget.
<br><br>
CAPTAIN JAMES T. KIRK: To boldly go where no chicken has gone before.
<br><br>
HIPPOCRATES: Because of an excess of phlegm in its pancreas.
<br><br>
LOUIS FARRAKHAN: The road, you see, represents the black man. The chicken
<br>'crossed' the black man in order to trample him and keep him down.
<br><br>
MARTIN LUTHER KING, JR.: I envision a world where all chickens will be
<br>free to cross roads without having their motives called into question.
<br><br>
MOSES: And God came down from the Heavens, and He said unto the chicken,
<br>"Thou shalt cross the road." And the chicken crossed the road, and there
<br>was much rejoicing.
<br><br>
RICHARD M. NIXON: The chicken did not cross the road. I repeat, the
<br>chicken did NOT cross the road.
<br><br>
FREUD: The fact that you are at all concerned that the chicken crossed
<br>the road reveals your underlying sexual insecurity.
<br><br>
DARWIN: Chickens, over great periods of time, have been
<br>naturally selected in such a way that they are now genetically
<br>dispositioned to cross roads.
<br><br>
EINSTEIN: Whether the chicken crossed the road or the road moved beneath
<br>the chicken depends upon your frame of reference.
<br><br>
BUDDHA: Asking this question denies your own chicken nature.
<br><br>
ERNEST HEMINGWAY: To die. In the rain.
<br><br>
ANDERSEN CONSULTING: Deregulation of the chicken's side of the road was
<br>threatening its dominant market position. The chicken was faced with
<br>significant challenges to create and develop the competencies required
<br>for the newly competitive market. Andersen Consulting, in a partnering
<br>relationship with the client, helped the chicken by rethinking its
<br>physical distribution strategy and implementation processes. Using the
<br>Poultry Integration Model (PIM), Andersen helped the chicken use its
<br>skills, methodologies, knowledge, capital and experiences to align the
<br>chicken's people, processes and technology in support of its overall
<br>strategy within a Program Management framework. Andersen Consulting
<br>convened a diverse cross-spectrum of road analysts and best chickens
<br>along with Anderson consultants with deep skills in the transportation
<br>industry to engage in a two-day itinerary of meetings in order to
<br>leverage their personal knowledge capital, both tacit and explicit, and
<br>to enable them to synergize with each other in order to achieve the
<br>implicit goals of delivering and successfully architecting and
<br>implementing an enterprise-wide value framework across the continuum of
<br>poultry cross-median processes. The meeting was held in a park-like
<br>setting, enabling and creating an impactful environment which was
<br>strategically based, industry- focused, and built upon a consistent,
<br>clear, and unified market message and aligned with the chicken's mission,
<br>vision, and core values. This was conducive towards the creation of a
<br>total business integration solution. Andersen Consulting helped the
<br>chicken change to become more successful.
<br><br>
COLONEL SANDERS: I missed one?

</body>
</html>

Post Comment

•

Only community members can submit or comment on code snippets. You must register or log in to contribute.

•

DaniWeb Marketplace (Sponsored Links)

DaniWeb Home > Code Snippets > javascript Syntax

The Message Snake