ΚΩΔΙΚΑΣ ΓΙΑ ΑΔΙΑΦΑΝΕΙΑ / OPACITY ΣΤΙΣ ΕΙΚΟΝΕΣ
Με τον παρακάτω κώδικα μπορείτε να αλλάξετε την ορατότητα των εικόνων σας, δηλαδή όταν βάζετε το ποντίκι επάνω τους να αλλάζει η φωτεινότητα και η διαφάνεια. Στον πρώτο κώδικα που επαναλαβάνεται 4 φορές για 4 εικόνες δεν έχω βάλει link παραπομπής στην αρχική εικόνα, ενώ στον δεύτερο κώδικα που και αυτός επαναλαβάνεται 4 φορές για 4 εικόνες υπάρχει link παραπομπής στην αρχική εικόνα διαστάσεων 1920Χ1200 px. Την αδιαφάνεια την ρυθμίζετε αλλάζωντας τα πράσινα νούμερα και τις διαστάσεις των εικόνων προεσκόπισης αλλάζωντας τα γαλάζια νούμερα.
Με τον παρακάτω κώδικα μπορείτε να αλλάξετε την ορατότητα των εικόνων σας, δηλαδή όταν βάζετε το ποντίκι επάνω τους να αλλάζει η φωτεινότητα και η διαφάνεια. Στον πρώτο κώδικα που επαναλαβάνεται 4 φορές για 4 εικόνες δεν έχω βάλει link παραπομπής στην αρχική εικόνα, ενώ στον δεύτερο κώδικα που και αυτός επαναλαβάνεται 4 φορές για 4 εικόνες υπάρχει link παραπομπής στην αρχική εικόνα διαστάσεων 1920Χ1200 px. Την αδιαφάνεια την ρυθμίζετε αλλάζωντας τα πράσινα νούμερα και τις διαστάσεις των εικόνων προεσκόπισης αλλάζωντας τα γαλάζια νούμερα.
Πρώτος κώδικας χωρίς link παραπομπής
στην αρχική εικόνα.
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
src="http://i.imgur.com/fiVofHIm.jpg"
width="232" height="145" />
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
src="http://i.imgur.com/rcivwQJm.jpg"
width="232" height="145" />
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
src="http://i.imgur.com/0nyxX2Lm.jpg"
width="232" height="145" />
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
src="http://i.imgur.com/oSC4D7Rm.jpg"
width="232"
height="145" />
Δεύτερος κώδικας με link παραπομπής
στην αρχική εικόνα.
<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
href="http://i.imgur.com/fiVofHI.jpg"
target="_blank">
<img src="http://i.imgur.com/fiVofHIm.jpg"
width="232" height="145" /></a>
<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
href="http://i.imgur.com/rcivwQJ.jpg"
target="_blank">
<img src="http://i.imgur.com/rcivwQJm.jpg"
width="232" height="145" /></a>
<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
href="http://i.imgur.com/0nyxX2L.jpg"
target="_blank">
<img src="http://i.imgur.com/0nyxX2Lm.jpg"
width="232" height="145" /></a>
<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70"
style="opacity:0.7;filter:alpha(opacity=70)"
href="http://i.imgur.com/oSC4D7R.jpg"
target="_blank">
<img src="http://i.imgur.com/oSC4D7Rm.jpg"
width="232" height="145" /></a>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.