Floating images effects with jQuery.

Σ' αυτήν την ανάρτηση θα σας δείξουμε τον τρόπο, πως μπορείτε μέσω τριών ή & περισσοτέρων εικονιδίων να δώσετε ένα πρωτότυπο εφέ στη σελίδα σας.

Τοποθετήστε ότι εικονίδιο θέλετε κι αφήστε το να αιωρείται και να εξωστρακίζετε μέσα στα πλαίσια του παραθύρου της σελίδας σας.

Μπορείτε επίσης να τα χρησιμοποιήσετε και σαν συνδέσμους (πολύ πρακτικό) ,που με ένα πάτημα να μεταφέρουν το επισκέπτη σας, στη σελίδα που επιθυμείτε.

Εμφανίζετε σωστά με τους browsers IE, Google Chrome & Opera.

Ας πάμε να δούμε, πως θα το περάσετε.

Τα βήματα είναι τα εξής....

Καταρχήν θα πάτε να κατεβάσετε το script και να το ανεβάσετε σε κάποιον server.

moveobj.js

Δείτε σχετική ανάρτηση εδώ

Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.

Και με το Ctrl + F θα κάνετε αναζήτηση για το....

</head>

Μόλις το βρείτε & πριν από το κλείσιμο του </head>
Θα προσθέσετε τον παρακάτω κώδικα.

Στο σημείο που λέει ...the script moveobj.js... θα προσθέσετε την διεύθυνση από τον server που ανεβάσατε προηγουμένος το script.

<script type="text/javascript" src="...the script moveobj.js..."></script>
<script type="text/javascript">
var flyimage1, flyimage2, flyimage3
function pagestart(){
flyimage1=new Chip("flyimage1",64,64);
flyimage2=new Chip("flyimage2",64,64);
flyimage3=new Chip("flyimage3",64,64);
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementByid)
window.onload=pagestart
</script>

Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και....

θα ξαναπάτε στον Πίνακα Ελέγχου σας ---> Διάταξη ---> Στοιχεία Σελίδας --->

Προσθήκη Gadget.

Και θα βρείτε το HTML/JavaScript

Θα το ανοίξετε και θα ρίξετε μέσα στο gadget τον παρακάτω κώδικα αφού προσθέσετε τις ανάλογες εικόνες & διευθύνσεις που θέλετε.

<div id="flyimage1" style="position:absolute; left: -500px; width:64; height:64;">
<a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></div>
<div id="flyimage2" style="position:absolute; left: -500px; width:64; height:64;">
<a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></div>
<div id="flyimage3" style="position:absolute; left: -500px; width:64; height:64;">
<a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a></div>

Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.

Τέλος!!!

Τώρα είσαστε έτοιμοι να κάνετε ανανέωση τη σελίδα σας και να απολαύσετε το εφέ που πρίν από λίγο τοποθετήσατε.

Επεξήγηση του κώδικα & παραμετροποιήσεις:

α) Στις εικόνες που θα βρείτε να κοιτάξετε να έχουν διάφανο υπόβαθρο (δηλαδή το format τους να είναι σε μορφή .png ή .gif)

β) Στον κώδικα που σας δίνω, έχω δώσει διάσταση στις εικόνες 64 Χ 64.
Αν εσείς θέλετε να είναι μικρότερες θα δώσετε τις ανάλογες διαστάσεις.

γ) Αν θελετε να προσθέσετε κι άλλες εικόνες θα πρέπει να προσθέσετε εντολές σε τέσσερα σημεία.
Τα οποία είναι....

Σημείο 1ο:

var flyimage1, flyimage2, flyimage3 π.χ. ,flyimage4 , flyimage5 , flyimage6 , ......

ΠΡΟΣΟΧΗ! ΜΗΝ ξεχάσετε το σημείο στίξης κόμμα (,) ανάμεσα στις εικόνες.

Σημείο 2ο:

flyimage1=new Chip("flyimage1",64,64);
flyimage2=new Chip("flyimage2",64,64);
flyimage3=new Chip("flyimage3",64,64);
ΕΔΩ π.χ. flyimage4=new Chip("flyimage4",64,64);
..........
..........
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");
ΕΔΩ π.χ. movechip("flyimage4");
...........
...........

Και στα σημεία του κώδικα, που θα προσθέσετε στο HTML/JavaScript gadget.

Σημείο 3ο:

πριν από το κλείσιμο του </div> το <a href="...direct link address..."><img src=".....direct link of your image .gif...." border=0></a>

Σημείο 4ο:

Στο σημείο του κώδικα που λέει "flyimage3" θα αλλάξετε το νούμερο 3 με 4,5,6....κτλ ανάλογα με πόσες εικόνες θα προσθέσετε.

δ) Στην περίπτωση που θέλετε να βάλετε τις εικόνες μόνο σαν εφέ, μπορείτε να διαγράψετε το κομμάτι της διεύθυνσης <a href="...direct link address...">

ε) Στην περίπτωση που θέλετε να βάλετε τις εικόνες σαν σύνδεσμο (δηλαδή όπως είναι ο κώδικας που σας δίνω) και θέλετε ο κάθε σύνδεσμος να ανοίγει σε καινούργιο παράθυρο, τότε, το σημείο <a href="...direct link address...">

θα το αντικαταστήσετε με το <a target="_blank" href="...direct link address...">

Εμείς σας δείξαμε τον τρόπο, τώρα ή έμπνευση είναι δική σας.

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!