January 13, 2009

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>


37 comments:

Dan Alan Charles said...

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

www.alanwarez.tk

wanna become a author pls do and comment

Alexandder_crb said...
This comment has been removed by the author.
Alexandder_crb said...

Cool :)
thank you!

t4-trix said...

its great and will be of use for me some day

Vikas said...

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

Divya Sai said...

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>

Vikas Sharma said...

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

Vikas Sharma said...

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

Divya Sai said...

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

&amp;&amp;

Vikas Sharma said...

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

Vikas Sharma said...

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

Vikas Sharma said...

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

Vikas Sharma said...

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

Vikas Sharma said...

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

Divya Sai said...

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

Vikas Sharma said...

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

Vikas Sharma said...

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

Take care,
Vikas

Vikas Sharma said...

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

Vikas Sharma said...

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

Divya Sai said...

Replied to you via mail...

Illuminator said...

Great post... Thanks a lot

Divya Sai said...

You are welcome buddy!

Anonymous said...

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

~Anonynous*

Abijah Gupta said...

Awesome!!
it works perfekt! :)

Saimoom said...

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

http://shinemark.blogspot.com

Sai - Blogger Help said...

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.

Anonymous said...

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

♥ΤιffäиЧ♥ΒïΒï Νïï♥ said...

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

Paul santosh said...

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

Anonymous said...

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

Adam 'n' Mysha said...

how to change the colour of the hover text

Sunshine Qila said...

lovin it..TQ

cockky said...

please help me . somebody ?

Anonymous said...

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

Arnav said...

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

warrior said...

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

Meow Opre said...
This comment has been removed by a blog administrator.
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy