Πώς μπορώ να κάνω hover μια εικόνα???

[ksavvas10]

Εχω φτιάξει ένα site σε joomla και θα ήθελα σε μερικές εικόνες που βρίσκονται μέσα σε κάποια module της αρχικής, όταν περνάει το ποντίκι από πάνω να γίνονται hover με transparent για π.χ. 50%. Εχω βρει έναν τέτοιο κώδικα αλλά δυστυχώς δεν λειτουργεί σε explorer. Ξέρει κανείς κανένα plugin που να κάνει αυτή την δουλεία ή έστω κάποιο κομμάτι κώδικα που να μπορέσω να το κάνω αυτό?

[manos]

Μπορεις να το κάνεις εύκολα με css και με την βοήθεια του photoshop.Άμα θες έτσι,πες μου για να σου στείλω τον κώδικα.

[ksavvas10]

nai...an theleis steilton mou...

[ksavvas10]

Μπορεις να το κάνεις εύκολα με css και με την βοήθεια του photoshop.Άμα θες έτσι,πες μου για να σου στείλω τον κώδικα.

Ναι, αν θέλεις στείλε μου τον κωδικα!

[macabre_sunsets]

Δοκίμασε το YooEffects και πιο συγκεκριμένα το Spotlight (link).

[thanocaster]

Και μόνο με css χωρίς photoshop γίνεται:

 

>
img.<εδώ-η-κλάση-των-εικόνων-σου>:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

 

Απλά, πρέπει να έχεις υπ' όψιν πως το property opacity δεν είναι CSS2 validated διότι είναι property του CSS3, ενώ όσα properties ξεκινάνε με παύλες (-ms, -moz, -khtml) δεν είναι validated γενικά. Μπορείς να καταφύγεις και σε λύση με διπλές φωτογραφίες (μια κανονική και μια ημιδιάφανη, προφανώς η λύση που θα σου προτείνει ο Μάνος), αλλά εκεί είναι τόσο μεγάλο το κόστος σε bandwidth που για μένα δεν αξίζει.

 

Γενικότερα, με την επιδεικτική άγνοια των browsers απέναντι στα W3 standards, έχω την εντύπωση πως δεν υπάρχει λόγος να ανησυχείς τόσο πολύ για το validation, όταν συζητάμε για τόσο δημοφιλείς και πολυεφαρμοσμένες μεθόδους. Άλλωστε, οι μεγαλύτερες σελίδες αυτή τη στιγμή στο διαδίκτυο έχουν το validation γραμμένο στα @@ τους (Google, facebook, insomnia , κλπ).

[ksavvas10]

Και μόνο με css χωρίς photoshop γίνεται:

 

>
img.<εδώ-η-κλάση-των-εικόνων-σου>:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

 

Απλά, πρέπει να έχεις υπ' όψιν πως το property opacity δεν είναι CSS2 validated διότι είναι property του CSS3, ενώ όσα properties ξεκινάνε με παύλες (-ms, -moz, -khtml) δεν είναι validated γενικά. Μπορείς να καταφύγεις και σε λύση με διπλές φωτογραφίες (μια κανονική και μια ημιδιάφανη, προφανώς η λύση που θα σου προτείνει ο Μάνος), αλλά εκεί είναι τόσο μεγάλο το κόστος σε bandwidth που για μένα δεν αξίζει.

 

Γενικότερα, με την επιδεικτική άγνοια των browsers απέναντι στα W3 standards, έχω την εντύπωση πως δεν υπάρχει λόγος να ανησυχείς τόσο πολύ για το validation, όταν συζητάμε για τόσο δημοφιλείς και πολυεφαρμοσμένες μεθόδους. Άλλωστε, οι μεγαλύτερες σελίδες αυτή τη στιγμή στο διαδίκτυο έχουν το validation γραμμένο στα @@ τους (Google, facebook, insomnia , κλπ).

Την διεύθυνση της εικόνας στην οποία θέλω να τοποθετηθεί ο κώδικας σε ποίο σημείο του κώδικα την βάζω όμως?? Για να καταλάβεις το site που έχω φτιάξει είναι www.insterea.gr και θέλω όταν ο χρήστης πάει πάνω απ τις εικόνες που γράφουν π.χ. Νεα στερεάς ή ελλαδικά κτλ. Να αλλάζει το opacity της εικόνας για να φαίνεται ότι μπορεί να πατήσει εκεί για να μπεί στην κατηγορία!

 

Δοκίμασε το YooEffects και πιο συγκεκριμένα το Spotlight (link).

Με το spotlight της yootools το έχω ξαναδοκιμάσει αλλα νομίζω πως δεν γίνετε να εφαρμόσεις αυτό το plug in μονο σε μία εικόνα.!!

[thanocaster]

Τί εννοείς; Απλά θα δώσεις σε μια εικόνα την αντίστοιχη κλάση... Οπότε, εκεί που έχεις για παράδειγμα:

 

>
<img src="http://www.newsit.gr/files/Image/00-ARTEMIS/09-02-2011/resized/ika_473_355.jpg" alt="Εικόνα" width="480" height="280" style="border:0;">

 

θα γίνει πχ:

 

>
<img src="http://www.newsit.gr/files/Image/00-ARTEMIS/09-02-2011/resized/ika_473_355.jpg" class="opaque" alt="Εικόνα" width="480" height="280" style="border:0;">

(έχω προσθέσει στο img tag το 'class="opaque"')

 

και ο κώδικας που θα προσθέσεις στο css θα είναι:

 

>
img.opaque:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

 

Οπότε, όποια εικόνα θα θέλεις να έχει αυτό το εφέ στο hover, θα της δίνεις την κλάση 'opaque'...

[ksavvas10]

Τί εννοείς; Απλά θα δώσεις σε μια εικόνα την αντίστοιχη κλάση... Οπότε, εκεί που έχεις για παράδειγμα:

 

>
<img src="http://www.newsit.gr/files/Image/00-ARTEMIS/09-02-2011/resized/ika_473_355.jpg" alt="Εικόνα" width="480" height="280" style="border:0;">

 

θα γίνει πχ:

 

>
<img src="http://www.newsit.gr/files/Image/00-ARTEMIS/09-02-2011/resized/ika_473_355.jpg" class="opaque" alt="Εικόνα" width="480" height="280" style="border:0;">

(έχω προσθέσει στο img tag το 'class="opaque"')

 

 

και ο κώδικας που θα προσθέσεις στο css θα είναι:

 

>
img.opaque:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

 

Οπότε, όποια εικόνα θα θέλεις να έχει αυτό το εφέ στο hover, θα της δίνεις την κλάση 'opaque'...

 

Οκ.. Το έφτιαξα και δούλεψε κανονικά! Ευχαριστώ!

[manos]

Και μόνο με css χωρίς photoshop γίνεται:

 

>
img.<εδώ-η-κλάση-των-εικόνων-σου>:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

 

Απλά, πρέπει να έχεις υπ' όψιν πως το property opacity δεν είναι CSS2 validated διότι είναι property του CSS3, ενώ όσα properties ξεκινάνε με παύλες (-ms, -moz, -khtml) δεν είναι validated γενικά. Μπορείς να καταφύγεις και σε λύση με διπλές φωτογραφίες (μια κανονική και μια ημιδιάφανη, προφανώς η λύση που θα σου προτείνει ο Μάνος), αλλά εκεί είναι τόσο μεγάλο το κόστος σε bandwidth που για μένα δεν αξίζει.

 

Γενικότερα, με την επιδεικτική άγνοια των browsers απέναντι στα W3 standards, έχω την εντύπωση πως δεν υπάρχει λόγος να ανησυχείς τόσο πολύ για το validation, όταν συζητάμε για τόσο δημοφιλείς και πολυεφαρμοσμένες μεθόδους. Άλλωστε, οι μεγαλύτερες σελίδες αυτή τη στιγμή στο διαδίκτυο έχουν το validation γραμμένο στα @@ τους (Google, facebook, insomnia , κλπ).

Δεν ήξερα οτι γινότανε και έτσι,ωραίος.

 

Οπότε δεν σου τον γράφω, αφού αυτός ο τρόπος είναι καλύτερος και πιο εύκολος.