EFFECT ΔΙΑΦΑΝΕΙΑΣ ΣΤΙΣ ΕΙΚΟΝΕΣ ΤΟΥ BLOG ΣΑΣ

Καλησπέρα φίλες και φίλοι. Προσωπικοί λόγοι με ανάγκασαν να μη σηκώσω ανάρτηση για ενάμισι μήνα και παραπάνω. Παρ' όλα αυτά η επισκεψιμότητα του ιστολογίου δεν έπεσε πολύ και σας ευχαριστώ γι' αυτό.
Σήμερα θα δούμε πως μπορούμε να εφαρμόσουμε ένα πολύ όμορφο effect στις εικόνες που έχουμε στο ιστολόγιο μας. Θα κάνουμε τις εικόνες διαφανείς (transparency) και όταν περνάμε το ποντίκι από πάνω τους να φαίνεται καθαρά η φωτογραφία. Αυτό το effect έχει σαν στόχο την καλαισθησία και τον ενυπωσιασμό, εφόσον όταν εφαρμόζεται σε ένα blog δίνει μια αίσθηση κίνησης και όχι στατικότητας. Δείτε τη παρακάτω εικόνα και περάστε από πάνω της το ποντίκι και θα καταλάβετε τι εννοώ.



Η εφαρμογή το είναι πανεύκολη. Ο κώδικας είναι ο παρακάτω:

<img src="εδώ μπαίνει η διεύθυνση της εικόνας που θέλετε να βάλετε" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" /></a

Η διεύθυνση μιας εικόνας βρίσκεται αν κάνετε δεξί κλικ πάνω σ' αυτήν και επιλέξετε: αντιγραφή τοποθεσίας εικόνας. Μετά με την μέθοδο αντιγραφή - επικόληση (copy - paste) τη δηλώνετε στον κώδικα. Αν θέλετε να κάνετε την εικόνα ενεργό σύνδεσμο (link) απλά πρέπει να προσθέσετε τον κώδικα που βρίσκεται σε μπλε χρώμα. Δείτε παρακάτω:

<a href="εδώ μπαίνει η διεύθυνση που θέλετε να παραπέμπει η εικόνα"><img src="εδώ μπαίνει η διεύθυνση της εικόνας που θέλετε να βάλετε" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" /></a>

Τέλος αν θέλετε να κεντράρετε την εικόνα το μόνο που έχετε να κάνετε είναι να βάλετε τον κώδικα ανάμεσα στο <center> και στο </center> Δηλαδή ο κώδικας θα γίνει όπως παρακάτω:

<center><a href="εδώ μπαίνει η διεύθυνση που θέλετε να παραπέμπει η εικόνα"><img src="εδώ μπαίνει η διεύθυνση της εικόνας που θέλετε να βάλετε" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" /></a></center>

Και το αποτέλεσμα θα είναι όπως η παρακάτω εικόνα. Αν βάλετε το ποντίκι πάνω στην εικόνα θα δείτε ότι είναι και σύνδεσμος (link) και αν κάνετε κλικ πάνω στην εικόνα θα μεταφερθείτε στη διεύθυνση που δηλώσατε στον κώδικα:



Αν θέλετε παραπάνω παραμετροποίηση μπορείτε να πειραματιστείτε αλλάζοντας τις τιμές που βρίσκονται στον κώδικα με μωβ χρώμα.
Ελπίζω το παραπάνο tutorial να το βρήκατε ενδιαφέρον και διασκεδαστικό. Καλή επιτυχία!