Floating Hover Text (κείμενο στον κέρσορα)

Νέοι bloggers γεια σας...

Σήμερα θα δούμε πως βάζουμε ένα κείμενο, να ακολουθεί τον κέρσορα του ποντικιού σας...Είναι πολύ απλό, και εύκολο, αλλά και εντυπωσιακό ! Μπαίνει σαν gadget !  DEMO ΕΔΩ

Kάντε αντιγραφή-επικόλληση τον παρακάτω κώδικα (μέσα στο HTML/JavaScript) :

<script language="javascript">

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.

var text=' TO KEIMENO ΣΑΣ ΕΔΩ...';

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>

(*...και αλλάξτε τη κόκκινη φράση TO KEIMENO ΣΑΣ ΕΔΩ... με τη φράση που θέλετε εσείς...)

Πατήστε ΑΠΟΘΗΚΕΥΣΗ, και είστε έτοιμοι...

(***επειδή πολλά JavaScript δεν λειτουργούν σε μερικά "παραφορτωμένα" blogs, η "συγκρούονται " με άλλα, η κάνουν το blog σας να ανοίγει πιο αργά,...δοκιμάστε το, και αν δείτε κάποιο πρόβλημα, τότε βγάλτε το....αν και δεν νομίζω να συμβεί με το εν λόγω JavaScript)

ΠΛΗΡΟΦΟΡΙΕΣ ΑΠΟ : royaltutor.net  (είναι πολύ διαδεδομένο, και υπάρχει κώδικας σε πολλά blogs)

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}