0 ΑΔΙΑΦΑΝΕΙΑ / OPACITY ΣΤΙΣ ΕΙΚΟΝΕΣ ΣΑΣ

Νέοι bloggers γεια σας !!! Θέλετε να αλλάξετε τη ορατότητα των εικόνων σας, και μόλις βάζετε το ποντίκι επάνω τους να αλλάζει η φωτεινότητα/διαφάνεια; Πάμε να το κάνουμε...με δύο διαφορετικούς τρόπους
1oς τρόπος: ...όταν βάζουμε μια εικόνα στα gadget, ΜΕΤΑΤΡΈΠΟΥΜΕ τον κώδικα ως εξής:


(image without hyperlink)(εικόνα χωρίς link)
<img

onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=40"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
style="opacity:0.4;filter:alpha(opacity=40)"  width="100"
height="100"src="ΤΟ URL / ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ" />


(image with hyperlink)(εικόνα με link)

<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=40"
style="opacity:0.4;filter:alpha(opacity=40)"
href="ΤΟ URL / ΔΙΕΥΘΥΝΣΗ ΤΟΥ LΙΝΚ" target="_blank">
<img  width="100"
height="100"src="ΤΟ URL / ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ" /></a>

..βεβαίως αλλάζουμε τα : width="100" και  height="100"
και μπορείτε να αλλάξετε τη μεταβλητή (opacity=0.5) : από 0.1 εως 0.9

2ος τρόπος:... Μπαίνουμε ΣΧΕΔΙΑΣΗ=>Επεξεργασία HTML=>

και ψάχνουμε (με το ctrl+f) το : </head> 

...και επικολλάμε ΠΑΝΩ / ΠΡΙΝ από αυτό, τον κώδικα:

<style type='text/css'>

a.opacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;}

a.opacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

</style>

...αλλάξτε αν θέλετε και προσαρμόσετε τις τιμές 50 και 0.5 αναλογα τα γούστα σας !!!
Πατήστε ΑΠΟΘΗΚΕΥΣΗ....

Τώρα κάθε φορά που θέλετε να αλλάξετε την ορατότητα μιας εικόνας θα βάζετε τη φράση class="opacity"  ανάμεσα στο κώδικα μεταξύ του <a  και  href= ...δηλαδή :

<a class="opacity" href="http://www.egioparalia.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ΤΟ URL / ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ" /></a></div>


Αυτό ηταν όλο...ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!! Μπορείτε να δείτε το DEMO
Μετάφραση, διασκευή, από  blogger-help.com/  και  bloggerbits.com/