Isn't this where we came in?
Pink Floyd - Outside The Wall/In The Flesh?

Εικόνες που φωτίζονται όταν περνάμε από πάνω τους το mouse!

Έχετε δει στην αριστερή μου sidebar τα banners των φίλων μου, που φαίνονται κάπως σκοτεινά, ενώ όταν περάσετε το mouse σας πάνω από το καθένα, εκείνο φωτίζεται; Σας αρέσει; Είναι αρκετά απλό, παρόλο που χρειάστηκε να συνδυάσω δύο πηγές για να βρω τη λύση! Πάμε να δούμε πώς γίνεται.

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

Το πρώτο βήμα είναι να προσθέσουμε τη λειτουργία αυτή στον κώδικα του blog μας. Για να το κάνουμε αυτό πάμε από τον ΠΑΝΟΠΤΗ –> ΣΧΕΔΙΑΣΗ –> ΕΠΕΞΕΡΓΑΣΙΑ HTML (κάνουμε ένα backup τον κώδικα για καλό και κακό) –> πατώντας CTRL+F βρίσκουμε το </head> –> και ακριβώς πριν από αυτό, βάζουμε τον παρακάτω κώδικα:

<!--IMAGE-OPACITY-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

Ωραία.

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

1. Εικόνες που γίνονται click (παραπέμπουν σε κάποιο link)

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

<a href="LINK"><img src="IMG_LINK" /></a>

Όπου LINK=To link στο οποίο παραπέμπει η εικόνα μας.

Όπου IMG_LINK=To link της εικόνας μας.

Στην περίπτωση αυτή, έχουμε να προσθέσουμε ανάμεσα στο a και το href το παρακάτω κομματάκι κώδικα:

class="linkopacity"

Δηλαδή ο τελικός μας κώδικας θα έχει αυτή τη μορφή:

<a class="linkopacity" href="LINK" ><img src="IMG_LINK" />

 

2. Εικόνες που δε γίνονται click (δεν παραπέμπουν σε κάποιο link)

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

<img src="IMG_LINK" />

Όπου IMG_LINK=To link της εικόνας μας.

Στην περίπτωση αυτή θα προσθέσουμε πριν από τον παραπάνω κώδικα το παρακάτω κομμάτι:

<a class="linkopacity">

και πριν το /> το παρακάτω κομμάτι:

class="linkopacity"

Δηλαδή ο τελικός μας κώδικας θα έχει τη μορφή:

<a class="linkopacity"><img src="IMGLINK" class="linkopacity" />

Αυτό ήταν!

Παράδειγμα από την πρώτη περίπτωση, εικόνες που γίνονται click και παραπέμπουν σε κάποιο link είναι τα banners των φίλων μου στην αριστερή sidebar.

Παράδειγμα από τη δεύτερη περίπτωση, εικόνα που δε γίνεται click και δεν παραπέμπει σε κάποιο link είναι ο Stewie στη δεξιά sidebar, στο ‘Who Are I?’.

Πάμε να σας δείξω κι εδώ από ένα παράδειγμα για να μην έχουμε παρεξηγήσεις!

α. Εικόνα που γίνεται click-παραπέμπει σε link:

O κώδικας είναι:

<a class="linkopacity" href="http://twistedwallpapers.blogspot.com/" target="_blank"><img src="http://i38.tinypic.com/11091ub.jpg" /></a>

Και το αποτέλεσμα:

β. Εικόνα που δε γίνεται click-δεν παραπέμπει σε link:

O κώδικας είναι:

<a class="linkopacity"><img src="http://i38.tinypic.com/11091ub.jpg" class="linkopacity" />

Και το αποτέλεσμα:

 

Τα είπα όσο πιο απλά και επεξηγηματικά μπορούσα. Ελπίζω να καταλάβατε και να σας ικανοποιεί αυτό το κολπάκι. Για οποιεσδήποτε απορίες, παρατηρήσεις ή αν έκανα κάποιο λάθος, παρακαλώ ενημερώστε με! Όσοι θα το δοκιμάσουν, παρακαλώ να δώσουν link για να το δούμε και οι υπόλοιποι!

Υ.Γ.: Αν θέλετε το banner σας να εμφανιστεί μαζί με τα υπόλοιπα, μπορείτε να επικοινωνήσετε μαζί μου!

0 Comment(s):

Post a Comment

Περιμένω σχόλια, απόψεις, παρατηρήσεις, σκέψεις, ιδέες, συμβουλές και οτιδήποτε άλλο έχετε να πείτε σχετικό με το θέμα.
Spam και βρισιές δε γίνονται δεκτά.
Για επικοινωνία μαζί μου εκτός του θέματος του post, αποταθείτε εδώ.