Add Floating Hover Text – Which Trails Mouse Cursor

Add Floating Hover Text - Which Trails Mouse Cursor

If you want to show any text like “Welcome Here” or “Sign My Guestbook” which follows the mouse cursor (trail text effect), like the one displayed in the image, or in this demo.

Then, simply add the code displayed below in any HTML/JavaScript widget in your blog.
(Log in to Blogger -> Layout  -> Add a Gadget).

And, if you are planning to show this floating text only in the Home-Page or any specific page, then read this post, on “How to display a widget only in a specific page in Blogger“.

<script language=”javascript”>

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text=’YOUR TEXT HERE…’;

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color=”#00436e”><b>’; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>’; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********

ns4 = (navigator.appName.indexOf(“Netscape”)>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf(“Netscape”)>=0 )? true: false;
var txtA=new Array();
text=text.split(”);
var x1=0;
var y1=-1000;
var t=”;

for(i=1;i<=text.length;i++){
t+=(ns4)? ‘<layer name=”txt’+i+'” top=”-100″ left=”0″ width=”‘+txtw+'” height=”1″>’ : ‘<div id=”txt’+i+'” style=”position:absolute; top:-100px; left:0px; height:1px; width:’+txtw+’; visibility:visible;”>’;
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? ‘</layer>’ : ‘</div>’;
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+’px’;
id.style.top=y+’px’;
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers[‘txt’+i]:(ie4)?document.all[‘txt’+i]:document.getElementById(‘txt’+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval(‘movetxts()’,delay);
}
</script>

Leave a Reply

35 Comments on "Add Floating Hover Text – Which Trails Mouse Cursor"

Notify of
avatar
Sort by:   newest | oldest | most voted
Dan Alan Charles
Guest

Its worth it and yes it worked for me…
visit

http://www.alanwarez.tk

wanna become a author pls do and comment

View Comment
Alexandder_crb
Guest

Cool 🙂
thank you!

View Comment
t4-trix
Guest

its great and will be of use for me some day

View Comment
Vikas
Guest

Its not working on my blog…i have gone with all explanation given by you..Add a gadget>Saved it> As i view my blog nathing happens like floating a text with the cursor…Please suggest me something…

Looking forward to hear from you.
Thanx & Regards
Vikas

View Comment
Divya Sai
Guest

Your coding is fine, try to change the position of the widget, like from sidebar to header or from header to footer etc.
Or else you can even try to paste this code directly in the header section, that means, just before this tag:

</head>

View Comment
Vikas Sharma
Guest

well i have tried changing the position of the widget but still not working

View Comment
Vikas Sharma
Guest

And if i m pasting this code in the template exactly as u said, It is giving me a error of
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference."

Please divya i will be really thankful to you if u can really sort this thing out for me..

View Comment
Divya Sai
Guest

okay,
At 4/5 places in that code, you will find two consecutive &, so Instead of that && type:

&amp;&amp;

View Comment
Vikas Sharma
Guest

and divya i m using Minima Black template…i hope the text is not in black colour as it will then not be visible..

View Comment
Vikas Sharma
Guest

//********** NO NEED TO EDIT BELOW HERE **********\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")

In above there are total 4 times of " && " these which i have changed with this "&&" like below

//********** NO NEED TO EDIT BELOW HERE **********\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")

BUt still no way out…:((

View Comment
Vikas Sharma
Guest

//********** NO NEED TO EDIT BELOW HERE **********\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")

In above there are total 4 times of " && " these which i have changed with this "&&" like below

//********** NO NEED TO EDIT BELOW HERE **********\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")

BUt still no way out…

View Comment
Vikas Sharma
Guest

its not showing properly here but i have done exactly what u said….n after tht i have also try changing the widget location…but still no way out…

View Comment
Vikas Sharma
Guest

Thanx for your concern divya..Really Appreciate ur fast reply..if u didnt find any way out please lemme knw as i m waiting for your reply..
Thanx,
Vikas

View Comment
Divya Sai
Guest

yup no idea…may be there's some code conflict b/w this hack and the template.

View Comment
Vikas Sharma
Guest

Are you there divya..please reply..!!

View Comment
Vikas Sharma
Guest

Oh ok…not an issue divya,,..thanx alot for your time,..
And you Doing really nice work..Keep it Up..

Take care,
Vikas

View Comment
Vikas Sharma
Guest

hello divya once again,
Can i download my template and send tht on ur email address…n then u can have a look in tht..n make it sort out?? please reply me …so tht i can send the mail..

View Comment
Vikas Sharma
Guest

i think you are not there…!! Aniwaz i am sending the template on ur both email address you please have a look on it n add the code (for floating text). My mail will be with the mail id of vikassharma189@gmail.com

Looking forward to hear from you.
Thanx & Regards,
Vikas Sharma

View Comment
Divya Sai
Guest

Replied to you via mail…

View Comment
Illuminator
Guest

Great post… Thanks a lot

View Comment
wpDiscuz