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 in any HTML/JavaScript widget (Log in -> Layout  -> Add a Gadget).

If you want to show this effect only in the HomePage or any specific page, then you should 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>

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

37 comments

Write comments
March 15, 2009 10:58 AM delete

Its worth it and yes it worked for me...
visit

www.alanwarez.tk

wanna become a author pls do and comment

Reply
avatar
June 16, 2009 7:30 AM delete This comment has been removed by the author.
avatar
t4-trix
August 22, 2009 11:35 AM delete

its great and will be of use for me some day

Reply
avatar
October 22, 2009 1:37 PM delete

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

Reply
avatar
October 22, 2009 1:39 PM delete

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>

Reply
avatar
October 22, 2009 2:21 PM delete

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

Reply
avatar
October 22, 2009 2:32 PM delete

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..

Reply
avatar
October 22, 2009 2:37 PM delete

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

&amp;&amp;

Reply
avatar
October 22, 2009 2:38 PM delete

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

Reply
avatar
October 22, 2009 2:48 PM delete

//********** 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...:((

Reply
avatar
October 22, 2009 2:53 PM delete

//********** 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...

Reply
avatar
October 22, 2009 2:55 PM delete

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...

Reply
avatar
October 22, 2009 3:02 PM delete

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

Reply
avatar
October 22, 2009 3:12 PM delete

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

Reply
avatar
October 22, 2009 3:13 PM delete

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

Reply
avatar
October 22, 2009 3:16 PM delete

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

Take care,
Vikas

Reply
avatar
October 23, 2009 7:23 AM delete

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..

Reply
avatar
October 23, 2009 7:35 AM delete

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

Reply
avatar
Anonymous
January 08, 2010 7:18 AM delete

erm hi. i wanna ask if there's a code for cursor images for blogger?

~Anonynous*

Reply
avatar
March 12, 2010 3:06 AM delete

Please tell me how can I use font size, font family?

http://shinemark.blogspot.com

Reply
avatar
March 12, 2010 7:12 AM delete

Where exactly do you want to use the new fonts?, may be this article will help you:
http://bloggerstop.net/2008/12/new-fonts-for-blogspotblogger-blogs.html
If you are still facing any difficulty, then feel free to comment here.

Reply
avatar
Anonymous
November 07, 2010 4:24 AM delete

herm.. do you think we can make multiple colours of that cursor text? :O if so, how? = u=

Reply
avatar
November 16, 2010 11:50 PM delete

how to make multiple colours on the flying hower text??

Reply
avatar
December 11, 2010 10:59 AM delete

hey it's cool and works perfectly I'm too from India

Reply
avatar
Anonymous
April 18, 2011 6:07 AM delete

hello!
how can i put this cursor on tumblr (:?

Reply
avatar
May 21, 2011 2:06 AM delete

how to change the colour of the hover text

Reply
avatar
November 29, 2011 9:36 AM delete

please help me . somebody ?

Reply
avatar
Anonymous
February 15, 2012 7:57 AM delete

Its not working on my tumblr :( what should i do?

Reply
avatar
March 27, 2012 3:03 PM delete

My Text is Showing or hovering very long distance from mouse curser....What should i do????

Reply
avatar
April 18, 2012 2:20 PM delete

is there a way to change colour and font size of the text?

Reply
avatar
October 28, 2013 8:03 AM delete This comment has been removed by a blog administrator.
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon