DHTML Mouse Cursor Text Trailer Code

This script will make a text message follow your cursor around the screen. You can change the message to say whatever you want.

Script Demo:

Dynamic HTML Code:

Insert this code into <head> tags

<style>
.trailerstyle {
  position: absolute;
  visibility: visible;
  top: -50px;
  font-size: 12px;
  font-family: Arial,Helvetica,Verdana;
        font-weight: bold;
  color: #000000;
}
</style>

<script>
<!--

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

// Insert your personal message below.
// Important: Do NOT remove the space at the end of the sentence!!!

var message="YOUR MESSAGE HERE! "
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 mousetrailer() {
  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("mousetrailer()",30)
}

//-->
</script>

Insert this code into <body> tags

<script>
<!--

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

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

//-->
</script>

Instruction:

You can change the style sheet in the .trailersytle tag above.
You can change the message in the javascript below that. Just look for the comment that says "YOUR MESSAGE HERE!"

Webmaster » Web Programming » DHTML » Mouse Cursor Text Trailer Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links