Text around mouse
Written by 21 August 2012
Adding a beautiful effect or style to your website can make it more beautiful. In the following code, a text follows the mouse and if the mouse stops at a point and stays, the text also stays at that point. In this case, the text starts from the right side of the mouse. Usually short texts are placed to the right side of the pointer. This beautiful effect alone can attract more audiences to your website and you can write your favorite text instead of the default text.
Code Snippet:
<!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!-- START OF Mouse Cursor Text Trailer DHTML -->
<!-- SUMMARY BRIEF
This DHTML script will make a text message follow
your cursor around the screen. You can change the
message to say whatever you want.
You can change the font face, color and size in
the .trailersytle tag below. You can change the message
in the javascript below that. Just look for the
comment that says "Insert your personal message below."
-->
<!-- Put this portion of the script inside of your <HEAD> tag -->
<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=" www.javascriptfreecode.com "
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>
<!-- Put this code inside of your <BODY> tag. -->
<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>
<!-- Lastly, insert the following into the <BODY> tag, itself, just like the example that follows. -->
example:
<body onLoad="mousetrailer()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
<!-- END OF Mouse Cursor Text Trailer DHTML --><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!