Text around mouse

Written by @kerixa 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:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: gech, ben.reed@laingbuisson.com, javaboy, Estevan Belo, Shahmeer
advertisement 2