Κείμενο που ακολουθεί το βελάκι του ποντικιού


Είναι πάρα πολλοί bloggers, που με ρωτάνε πως γίνεται να βάλουν ένα κειμενάκι που να ακολουθεί το δείκτη του ποντικιού. Κάτι ανάλογο δηλαδή με αυτό που βλέπουν που έχω κάνει στο άλλο μου blog.
Το συγκεκριμένο κόλπο το είχα δει στο φιλικό blog του
Johnpatra, και σκέφτηκα να το αναδημοσιεύσω προς εξυπηρέτηση των αναγνωστών.
Αν θέλετε να έχετε λοιπόν και εσείς ένα ξεχωριστό blog που να διαφέρει από τα υπόλοιπα, με κείμενο που θα ακολουθεί το βελάκι του ποντικιού των επισκεπτών σας όταν αυτοί είναι μέσα στο blog σας, ακολουθήστε τα παρακάτω βήματα:

1. Συνδεθείτε στον λογαριασμό σας

2. Πανόπτης --> Σχεδίαση --> Προσθήκη gadget --> HTML/JavaScript

3. Επικολλήστε εκεί τον παρακάτω κώδικα:







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



Αλλάξτε το κείμενο που σας έχω μαρκάρει με κόκκινο, και γράψτε αυτό που θέλετε να ακολουθεί το ποντίκι σας.
(Συμβουλή:μην βάλετε μεγάλο κείμενο γιατί θα γίνεται κουραστικό για τους επισκέπτες.)

4. Μην ξεχάσετε να πατήσετε αποθήκευση κι είστε έτοιμοι!




Add To Facebook Add To Twitter Add To Yahoo Stumble This Fav This With Technorati Add To Del.icio.us Digg This Add To Reddit

10 σχόλια:

Ανώνυμος είπε...

Ακολούθησα τις παραπάνω συμβουλές,έκανα αντιγραφή και επικόληση όλου του κώδικα, έγραφα την λέξη,αντί του μαρκαρισμένου με κόκκινο κειμένου σας αλλά δυστυχώς δεν λειτουργεί στον κέρσορά μου ο οποίος είναι ο τυπικός.
Μήπως θα μπορούσες να με βοηθήσεις λίγο;
Μήπως πρέπει να αλλάξω ίσως και τις άλλες λειτουργίες όπως το χρώμα-γραμ/ρα κοκ γιατί είναι διάφανο;

Please help me..μου αρέσει πολύ στο blog σου και προσπαθώ από εχθές γαμώτο!

ekabitis είπε...

Ανώνυμε, -αν και θα σε προτιμούσα επώνυμο-, το συγκεκριμένο widget λειτουργεί άψογα. Το πιθανότερο είναι να μην αντέγραψες σωστά ολόκληρο τον κωδικό. Κάνε ξανά μια προσπάθεια και είμαι σίγουρος ότι θα δουλέψει

Ανώνυμος είπε...

ΣΥΜΦΟΝΩ ΜΕ ΤΟΝ ΑΝΩΝΥΜΟ (ΑΝΑΡΤΗΣΗ ΤΟΥ:16 ΟΚΤΩΒΡΙΟΥ 2010 3:54 Μ.Μ.). ΕΚΑΝΑ ΚΑΙ ΕΓΩ ΤΟ ΙΔΙΟ ΠΡΑΓΜΑ ΚΑΙ ΔΕΝ ΛΕΙΤΟΥΡΓΕΙ. ΤΟ ΠΡΟΣΠΑΘΗΣΑ ΤΟ ΞΑΝΑΠΡΟΣΠΑΘΗΣΑ ΑΛΛΑ ΤΙΠΟΤΑ. ΔΕΝ ΞΕΡΩ ΤΙ ΝΑ ΚΑΝΩ. ΜΗΠΩΣ ΕΣΥ ΕΚΑΒΗΤΗ ΔΕΝ ΕΓΡΑΨΕΣ ΣΩΣΤΑ ΤΟΝ ΚΩΔΙΚΟ Η ΜΗΠΩΣ ΦΤΑΙΕΙ ΚΑΤΙ ΑΛΛΟ? ΘΑ ΗΘΕΛΑ ΠΑΡΑ ΠΟΛΥ ΝΑ ΜΑΘΩ ΠΩΣ ΓΙΝΕΤΑΙ ΑΥΤΟ. ΕΙΝΑΙ ΠΟΛΥ ΩΡΑΙΟ.

ekabitis είπε...

Παιδιά, έλεος μ' αυτήν την ανωνυμία. Τόσο δύσκολο είναι δηλαδή να γράψετε ποιοι είσαστε?
Ο κωδικός είχε όντως ένα προβληματάκι το οποίο διορθώθηκε. Μπορείτε να τον χρησιμοποιήσετε.

teo είπε...

Σας ευχαριστω απο καρδιας.

ekabitis είπε...

Νά'σαι καλά φίλε TEO.

STUDIO 962 AGRINIO 96,8 MHZ είπε...

XRONIA POLLA SE OLOYS SAS PAIDIA KAI SE SENA EKAVITH..OYTE SE MENA LEITOYRGEI...

vassoblonde είπε...

TI ΩΡΑΙΟ ΦΙΛΕ ΜΟΥ...ΕΓΩ ΒΡΕΙ ΚΙ ΑΛΛΑ ΟΜΟΡΦΑ ΑΠΟ ΕΣΕΝΑ,ΠΟΛΥ ΧΡΗΣΙΜΑ ΓΙΑ ΝΑ ΟΜΟΡΦΗΝΟΥΜΕ ΤΑ ΗΜΕΡΟΛΟΓΙΑ ΜΑΣ...ΑΛΛΑ ΚΑΤΙ ΔΕΝ ΠΑΕΙ ΚΑΛΑ..ΔΕΝ ΜΟΥ ΛΕΙΤΟΥΡΓΕΙ ΚΑΙ ΑΣ ΠΡΟΣΠΑΘΗΣΑ...ΙΣΩΣ ΦΤΑΙΝΕ ΠΟΥ ΘΑ ΕΧΩ ΒΑΛΕΙ ΚΙ TRICKS..

ekabitis είπε...

Studio και Vassoblonde παρατήρησα όντως ότι σε κάποια Templates το συγκεκριμένο script δεν λειτουργεί! Είσαστε μάλλον σ΄αυτή τη κατηγορία, και πραγματικά λυπάμαι πολύ γι αυτό!

Ανώνυμος είπε...

ΔΟΥΛΕΥΕΙ ΤΕΛΕΙΑ!!!!!!!!!

http://etsiigiaplaka.blogspot.com/

Δημοσίευση σχολίου