Κείμενο που ακολουθεί τον κέρσορα του ποντικιού


Σίγουρα θα έχετε δει σε πολλά blogs ένα κείμενο το οποίο ακολουθεί τον κέρσορα, δηλαδή το ποντίκι, όταν αυτό κουνιέται μέσα στο blog. Με αυτό τον τρόπο ο ιδιοκτήτης του blog μπορεί να καλωσορίσει ή να προβάλει κάποιο μήνυμα στον επισκέπτη με έναν όμορφο τρόπο :)

Ας δούμε όμως πώς θα το εγκαταστήσετε στο blog σας:

1) Σύνδεση στον blogger
2) Σχεδίαση
3) Προσθήκη Gadget
4) και μετά το HTML/JavaScript

Και στην συνέχεια προσθέτουμε τον παρακάτω κωδικό στο δεύτερο κουτάκι:

Ο ΚΩΔΙΚΑΣ ΕΝΗΜΕΡΩΘΗΚΕ ΣΤΙΣ 16/09/2013

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='
ΓΡΑΨΤΕ ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΠΟΥ ΘΕΛΕΤΕ...';

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 left="0" top="-100" width="'+txtw+'" name="txt'+i+'" 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>


5) Στο κείμενο με τα μπλέ γράμματα, βάλε αυτό που θέλεις εσύ να λέει !

6) Πατάς Αποθήκευση και τέλος ! 



Number of Comments: 7

ΕΥΧΑΡΙΣΤΩ ΠΟΛΥ !!!

Ο κώδικας της ανάρτησης ενημερώθηκε.(16/09/2013)

Ξέρω ότι η ερώτηση είναι φρικτή αλλά την σχεδίαση που μπορώ να την βρω?

Δεν γνωρίζω καθόλου από σχεδίαση, καλύτερα ψάξε έτοιμα σχέδια από το Google

μα παιδια πηγαινω στον πινακα ελεγχου και δεν ξερω που ειναι η διαταξη ας με βοηθησει καποιος σας παρακαλω πολυ.....!