Κυλιόμενο κείμενο και κυλιόμενη εικόνα

Κυλιόμενο κείμενο
Κυλιόμενο κείμενο
Κυλιόμενο κείμενο
Κυλιόμενο κείμενο
Κυλιόμενο κείμενο

Δείτε πως μπορείτε να βάλετε κυλιόμενο κείμενο ή εικόνα στο blog σας. Είναι πολύ απλό χωρίς jawascript, μόνο με HTML και CSS.

1. Η πιο απλή μορφή, έρχεται το κείμενο από τα δεξιά μας προς τα αριστερά:
<marquee> Κυλιόμενο κείμενο κατευθυνόμενο αριστερά. </marquee>
Κυλιόμενο κείμενο κατευθυνόμενο αριστερά.

2. Το ίδιο με το προηγούμενο απλά εδώ έχουμε χρώμα φόντου γαλάζιο:
<marquee bgcolor=LightBlue> Το κείμενο πάει προς τα αριστερά και έχει χρώμα φόντου. </marquee>
Το κείμενο πάει προς τα αριστερά και έχει χρώμα φόντου.

3. Μπορείτε να το κάνετε να πηγαινοέρχεται με την παρακάτω γραμμή κώδικα:
<marquee behavior="alternate"> Το κείμενο πάει εναλλάξ μια προς δεξιά και μια προς αριστερά. </marquee>
Το κείμενο πάει εναλλάξ μια προς δεξιά και μια προς αριστερά.

4. Εδώ πάει προς τα δεξιά:
<marquee direction="right">κείμενο προς δεξιά </marquee>Κείμενο προς δεξιά.
κείμενο προς δεξιά

5. Από κάτω προς τα πάνω:
<marquee direction="up" bgcolor="LightBlue">Το κείμενο πάει από κάτω προς τα πάνω. </marquee>
Το κείμενο πάει από κάτω προς τα πάνω.

6. Μπορείτε να βάλετε και εικόνα:
<marquee direction="left" scrollamount="10"><img src="http://2.bp.blogspot.com/-y2v02X4BSrI/UUgWP--WAaI/AAAAAAAAOAw/Qyum4P1bLjo/s320/stork.gif" /></marquee>

ή
<marquee direction="right" scrollamount="22"><img src="http://2.bp.blogspot.com/-40ATSl1x9K4/UUgWPwbg1HI/AAAAAAAAOAs/4cj13walX2w/s320/skillos.gif" /></marquee>



7. Σταματάει η κίνηση όταν το ποντίκι περάσει πάνω από το κείμενο:
<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"> Βάλτε τον κέρσορα πάνω στο κείμενο</marquee>
Βάλτε τον κέρσορα πάνω στο κείμενο

8. Με χρωματιστό κείμενο:
<font color="#ff0000"><marquee scrollamount="4" bgcolor="#cccccc">Χρωματιστό κείμενο</marquee></font>
Χρωματιστό κείμενο

9. Βάλτε hyperlinks (υπερσύνδεσμο):
<marquee align="middle" behavior="scroll" bgcolor="#99FFFF" direction="left" scrollamount="4"><a href="http://facebook.com/TetsiWorld" target="_blank">Facebook</a></marquee>
Facebook | Twitter | RSS

9. Με εικόνα στο background:

tetsitech.blogspot.com

Δείτε όλες τις παραμέτρους που μπορούμε να δώσουμε στην ετικέτα <marquee> :
BGCOLOR=”Χρώμα” → Χρώμα φόντου.
DIRECTION=”left/right/up/down” → Κατεύθυνση του αντικειμένου (κείμενο,εικόνα...).
BEHAVIOR=”scroll/slide/alternate” → Συμπεριφορά του αντικειμένου.
Scroll → Το αντικείμενο κινείτε συνεχώς.
Slide → Το αντικείμενο κινείτε μόνο μια φορά και μετά σταματά.
Alternate → Το αντικείμενο κινείτε επαναλαμβανόμενα αριστερά δεξιά.
TITLE=’Κείμενο” → Το κείμενο που εμφανίζετε με το mouse over.
SCROLLMOUNT=”Αριθμός” → Ταχύτητα του αντικειμένου(όσο μεγαλύτερη, τόσο ταχύτερο).
SCROLLDELAY=”Δευτερόλεπτα” → Καθυστέρησης.
LOOP=”Αριθμός|-1|infinite” → Επανάληψη (infinite=άπειρο).
WIDTH=”Αριθμός” → Το μήκος του αντικειμένου (σε pixel (px) ή επί της εκατό(%)).

Παρακάτω σας παραθέτω και δύο widget για το blog σας που μπορείτε να τα βάλετε πολύ εύκολα με τον ακόλουθο τρόπο:

  • Σύνδεση στο λογαριασμό μας στο blogger.com
  • Διάταξη
  • Προσθήκη gadget
  • HTML/JavaScript
  • Επικόλληση και αποθήκευση του κώδικα με το κυλιόμενο κείμενο η κυλιόμενης εικόνας που θέλετε









<center>
<table border="10" cellpadding="3" height="135" width="195" bgcolor="#F2F5A9"> <tbody><tr> <td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5" direction="up" align="center">
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>
</marquee>
</td> </tr> </tbody></table></center>

1. Όπου ΔΙΕΥΘΥΝΣΗ θα βάλετε τη διεύθυνση που θα "στέλνει" (σε νέο παράθυρο) η φωτογραφία σας...
2. Όπου ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ θα βάλετε το URL της εικόνας που θα φαίνεται...
3. Εάν θέλετε λιγότερες ή περισσότερες φωτογραφίες, τότε αφαιρέστε ή προσθέστε αντίστοιχα τον παρακάτω κώδικα:
<a href="ΔΙΕΥΘΥΝΣΗ" target="_blank"><img src="ΔΙΕΥΘΥΝΣΗ ΦΩΤΟΓΡΑΦΙΑΣ?imgmax=800" /></a>

Το δεύτερο widget δείτε το εδώ. Ορίστε και ο κώδικάς του:

2 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ