Image opacity effect with CSS and Java Script events in Blogger.

Δείτε έναν εύκολο τρόπο για να δημιουργήσετε όμορφα εφέ στις εικόνες που διακοσμούν το ιστολόγιό σας με χρήση css & javascript.

Θα μπείτε στον Πίνακα ελέγχου του blog σας --> Σχεδίαση --> Επεξεργασία HTML.

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

</head>

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

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7;}

a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

Το 70 & το 0,7 ( με πορτοκαλί χρώμμα ) μπορείτε να τα αλλάξετε, μικραίνοντας το βαθμό διαφάνειας για μεγαλύτερη αντίθεση.

Παράδειγμα:

<style type='text/css'>
a.opacity img { /* ρυθμίσεις για την αδιαφάνεια της εικόνας σας */
filter:alpha(opacity=40); /* τιμές από 10 έως 90 */
-moz-opacity: 0.4; /* τιμές από 0,1 έως 0,9 */
opacity: 0.4; /* τιμές από 0,1 έως 0,9 */
-khtml-opacity: 0.4;} /* τιμές από 0,1 έως 0,9 */

a.opacity:hover img { /* ρυθμίσεις για το ( hover δηλ. όταν πάει ο κέρσορας πάνω ) της εικόνας σας */
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και τώρα, σε όποια εικόνα, banner θέλετε να δώσετε το εφέ αυτό θα το γράφετε όπως στο παρακάτω παράδειγμα

<a class="opacity" href="....το url...."><img width="....το πλάτος της εικόνας...." border="0" src="....το direct link της εικόνας του banner...." height="....το ύψος της εικόνας...." title="....ο τίτλος του ιστολογίου...."/></a>

Δείτε ένα έτοιμο παράδειγμα από το banner μας για να το καταλάβετε καλύτερα....

<a class="opacity" href="http://loneeagle110.blogspot.com/"><img width="150" border="0" src="http://i48.tinypic.com/1r4son.png" height="50" title="Στάλες στο γαλάζιο"/></a>

Σημείωση:

Τα width & height τα προσθέτουμε μόνο & μόνο όταν θέλουμε να δώσουμε ΕΜΕΙΣ συγκεκριμένες τιμές (διαστάσεις) στις εικόνες μας.

Γιατί καμιά φορά, κάποιο φιλικό banner ή κάποιο βιντεάκι από το YouTube που θα πάρουμε, μπορεί να είναι πιο φαρδύ από το πλάτος της πλαϊνής μας στήλης και για να μην βγει εκτός ορίων μπορούμε να το μικρύνουμε μ'αυτόν τον τρόπο, χωρίς να το αλλιώσουμε.

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

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