T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
9th May

Javascript predogled slike – CSS opacity – picture preview – picture fade

Dodaten način, kako priti do fade efekta, ki smo ga že enkrat opisali (opisan je bil primer s jQuery dodatkom), je kreiranje dveh CSS klasov, kjer ima eden dodan CSS atribut opacity, ki spremeni nivo transparentnosti slike.

Kot primer si predstavljajmo množico slik od katerih je aktivna le ena. Tista, ki je aktivna ne sme biti transparentna oz. je atribut opacity nastavljen na 1. Vse ostale pa so enako transparentne. Na vsak HTML a element oz. link dodamo javascript klic, ki bo povečal sliko ter ji odstranil transparentnost:

[javascript]
enlargePicture(‘pot_do_slike.jpg’, ‘ID A – link elementa’);
enlargePicture(‘image_launch_a5.jpg’, ‘image1′);
[/javascript]

Javascript enlargePicture funkcija, ki v DIV za predogled slike modificira trenutno pot do slike, klicani sliki nastavi class imageActive (odstrani transparentnost), vsem ostalim pa nastavi transparentnost, tako da uporabnik lahko vidi katera slika je trenutno aktivna in katera ne. Javascript koda:
[javascript]
function enlargePicture(src, wrapperID) {
// Set new image to preview area
document.getElementById(‘preview_image’).src = src;

// Remove all active classes from images
var elements = document.getElementsByTagName(‘a’);
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == 'activeImage') {
elements[i].className = 'fadedImage';
}
}

// Assign active class to the caller (the href which was clicked)
var wrapper = document.getElementById(wrapperID);
wrapper.className = 'activeImage';
}
[/javascript]

CSS, ki nastavi opacity nastavitev v vseh brskalnikih:
[css]
.fadedImage {
float:left;
opacity:.50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
width:95px;
}
[/css]

Opis:
#1 IE: filter: alpha(opacity=50);
#2 Starejše verzije Mozilla brskalnik: -moz-opacity: 0.5;
#3 Standarden ukaz (Firefox): opacity:.50;

Preizkusite delovanje zgoraj omenjenega primera.

Dodatne informacije:

Delodajalec: Pangaea.si


Dodaj komentar

You must be logged in to post a comment.