Πώς να κάνω μια θολή εικόνα όταν ο δρομέας δεν είναι σε αυτό στο Tumblr

Μπορείτε να δημιουργήσετε ένα εφέ φωτογραφίας στο θέμα Tumblr που εμφανίζει σαφώς μια εικόνα όταν το ποντίκι κινείται πάνω στην εικόνα, αλλά όταν το ποντίκι δεν αιωρείται πάνω από την εικόνα, η εικόνα εμφανίζεται θολή. Πρώτα, ετοιμάστε τις εικόνες που θα χρησιμοποιήσετε για το εφέ. Στη συνέχεια, εισάγετε δύο αποσπάσματα κώδικα στο θέμα Tumblr. Σημειώστε ότι ο κώδικας δεν υποστηρίζεται στις δημοσιεύσεις Tumblr, μόνο σε θέματα ιστολογίου.

Προετοιμασία εικόνων

Για να ολοκληρώσετε την εργασία θολών εικόνων, θα χρειαστείτε δύο σχεδόν όμοιες εικόνες : ένα αντίγραφο της αρχικής σαφούς εικόνας και ένα δεύτερο αντίγραφο της ίδιας εικόνας, μόνο θολή. Χρησιμοποιήστε το εφέ Blur στο GIMP ή στο Photoshop για να δημιουργήσετε τη θολή εμφάνιση της δεύτερης φωτογραφίας. Βεβαιωθείτε ότι οι εικόνες έχουν τις ίδιες ακριβώς διαστάσεις.

Κωδικός JavaScript

Ένα απόσπασμα κώδικα JavaScript εισάγεται ανάμεσα στο & lt; head & gt; και & lt; /head & gt; Ο κώδικας JavaScript περιλαμβάνει τα συμβάντα MouseRollover και MouseOut. Το συμβάν MouseRollover δίνει εντολή στην εικόνα να εμφανίζεται όταν το ποντίκι κινείται πάνω από την εικόνα. Το συμβάν MouseOut καθορίζει ποια εικόνα θα εμφανιστεί όταν το ποντίκι δεν κινείται πάνω από την εικόνα.

Το απόσπασμα κώδικα JavaScript για να χρησιμοποιηθεί για αυτό το αποτέλεσμα είναι:

& lt; script language = "javascript" & gt; . λειτουργία MouseRollover (MyImage) {MyImage.src = "Picture1.jpg"; } λειτουργία MouseOut (MyImage) {MyImage.src = "Picture2.jpg"; } & lt; /script & gt;

Αλλάξτε την αναφορά "Picture1.jpg" στη διεύθυνση URL για τη σαφή αρχική εικόνα. Αλλαγή της αναφοράς "Picture2.jpg" στη διεύθυνση URL της θολής εικόνας

HTML code

Ο κώδικας HTML που συνοδεύει το απόσπασμα Javascript ορίζει το μέγεθος, την τοποθεσία και διάταξης της εικόνας. Εισαγάγετε τον κώδικα HTML στο θέμα Tumblr όπου θέλετε να εμφανίζεται η εμφάνιση φωτογραφιών. Ο κώδικας HTML που συνοδεύει το απόσπασμα Javascript παραπάνω είναι:

& div align = "center" & gt; & lt;! - Η εικόνα εμφανίζεται εδώ .-- & gt; & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (αυτό)" onMouseOut = "MouseOut (this)" /> & lt; /div & gt;

Αντικαταστήστε το "Picture2.jpg" με τη διεύθυνση URL στη θολή φωτογραφία, η οποία θα εμφανίζεται από προεπιλογή. " και "ύψους" στο επιθυμητό μέγεθος της εικόνας που έχει αποτυπωθεί.

Εγκατάσταση κώδικα

Για να εγκαταστήσετε τον κώδικα στο θέμα Tumblr, Πίνακα ελέγχου Tumblr και, στη συνέχεια, κάντε κλικ στην καρτέλα "Προσαρμογή" στον πίνακα ελέγχου για να τροποποιήσετε το ιστολόγιο. Κάντε κλικ στην επιλογή "Επεξεργασία HTML" για να ανοίξετε τον επεξεργαστή θεμάτων. Επιλέξτε το απόσπασμα κώδικα Javascript για να τονίσετε τον κώδικα και στη συνέχεια πατήστε "Ctrl-C" για να αντιγράψετε τον κώδικα. Κάντε κλικ στο διάστημα μπροστά από την ετικέτα "& lt; /head & gt;" στον κωδικό του θέματος και στη συνέχεια πατήστε "Ctrl-V" για να επικολλήσετε τον κώδικα.

Αντιγράψτε τον κώδικα HTML και στη συνέχεια επιστρέψτε στον επεξεργαστή θεμάτων Tumblr . Βρείτε τη θέση στον κώδικα όπου θέλετε να αποδίδεται το εφέ φωτογραφίας. Κάντε κλικ στην τοποθεσία και, στη συνέχεια, πατήστε "Ctrl-V" για να επικολλήσετε το απόσπασμα HTML. Κάντε κλικ στην επιλογή "Ενημέρωση προεπισκόπησης" για να δοκιμάσετε το εφέ στο παράθυρο Προεπισκόπηση. Κάντε κλικ στην επιλογή "Αποθήκευση" για να αποθηκεύσετε τις αλλαγές