Μπορείτε να δημιουργήσετε ένα εφέ φωτογραφίας στο θέμα Tumblr που εμφανίζει μια εικόνα καθαρά όταν το ποντίκι αιωρείται πάνω από την εικόνα, αλλά τότε όταν το ποντίκι δεν αιωρείται πάνω από την εικόνα, η εικόνα εμφανίζεται θολή. Αρχικά, ετοιμάστε τις εικόνες που θα χρησιμοποιήσετε για το εφέ. Στη συνέχεια, εισαγάγετε δύο αποσπάσματα κώδικα στο θέμα Tumblr. Σημειώστε ότι ο κώδικας δεν υποστηρίζεται σε δημοσιεύσεις Tumblr, μόνο σε θέματα ιστολογίου.
Προετοιμασία εικόνων
Για να ολοκληρώσετε την εργασία με θολή εικόνα, θα χρειαστείτε δύο σχεδόν πανομοιότυπες εικόνες: ένα αντίγραφο της αρχικής καθαρής εικόνας και ένα δεύτερο αντίγραφο της ίδιας εικόνας, μόνο θαμπή. Χρησιμοποιήστε το εφέ Blur στο GIMP ή το Photoshop για να δημιουργήσετε τη θολή εμφάνιση της δεύτερης φωτογραφίας. Βεβαιωθείτε ότι οι εικόνες έχουν τις ίδιες ακριβώς διαστάσεις.
Κωδικός JavaScript
Ένα απόσπασμα κώδικα JavaScript παρεμβάλλεται μεταξύ του
και ετικέτες του ιστολογίου σας Tumblr. Ο κώδικας JavaScript περιλαμβάνει τα συμβάντα MouseRollover και MouseOut. Το συμβάν MouseRollover δίνει εντολή στην εμφάνιση της καθαρής εικόνας όταν το ποντίκι αιωρείται πάνω από την εικόνα. Το συμβάν MouseOut καθορίζει ποια εικόνα θα εμφανίζεται όταν το ποντίκι δεν αιωρείται πάνω από την εικόνα.Το απόσπασμα κώδικα JavaScript που χρησιμοποιείται για αυτό το εφέ είναι:
Αλλάξτε την αναφορά "Picture1.jpg" στη διεύθυνση URL για την καθαρή αρχική εικόνα. Αλλάξτε την αναφορά "Picture2.jpg" στη διεύθυνση URL για τη θολή εικόνα.
Κωδικός HTML
Ο κώδικας HTML που συνοδεύει το απόσπασμα Javascript καθορίζει το μέγεθος, την τοποθεσία και τη διάταξη της εικόνας. Εισαγάγετε τον κώδικα HTML στο θέμα Tumblr όπου θέλετε να εμφανίζεται η προβολή φωτογραφιών. Ο κώδικας HTML που συνοδεύει το απόσπασμα Javascript παραπάνω είναι:
Αντικαταστήστε το "Picture2.jpg" με τη διεύθυνση URL στη θολή φωτογραφία, η οποία θα εμφανίζεται από προεπιλογή. Αλλάξτε τις μεταβλητές "πλάτος" και "ύψος" στο επιθυμητό μέγεθος της εικόνας που αποδίδετε.
Εγκατάσταση κώδικα
Για να εγκαταστήσετε τον κώδικα στο θέμα Tumblr, ανοίξτε τον πίνακα ελέγχου Tumblr και, στη συνέχεια, κάντε κλικ στην καρτέλα "Προσαρμογή" στον πίνακα ελέγχου για να τροποποιηθεί το ιστολόγιο. Κάντε κλικ στην επιλογή "Επεξεργασία HTML" για να ανοίξετε το πρόγραμμα επεξεργασίας θεμάτων. Επιλέξτε το απόσπασμα κώδικα Javascript για να επισημάνετε τον κώδικα και, στη συνέχεια, πατήστε "Ctrl-C" για να αντιγράψετε τον κώδικα. Κάντε κλικ στο διάστημα μπροστά από το ""Στον κωδικό θέματος και, στη συνέχεια, πατήστε" Ctrl-V "για να επικολλήσετε τον κώδικα.
Αντιγράψτε τον κώδικα HTML και μετά επιστρέψτε στο πρόγραμμα επεξεργασίας θεμάτων Tumblr. Βρείτε την τοποθεσία στον κώδικα όπου θέλετε να αποδώσει το εφέ φωτογραφίας. Κάντε κλικ στην τοποθεσία και, στη συνέχεια, πατήστε "Ctrl-V" για να επικολλήσετε το απόσπασμα HTML. Κάντε κλικ στο "Ενημέρωση προεπισκόπησης" για να ελέγξετε το εφέ στο παράθυρο προεπισκόπησης. Κάντε κλικ στο "Αποθήκευση" για να αποθηκεύσετε τις αλλαγές.
