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:
  1. enlargePicture('pot_do_slike.jpg', 'ID A - link elementa');
  2. enlargePicture('image_launch_a5.jpg', 'image1');

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:
  1. function enlargePicture(src, wrapperID) {
  2.     // Set new image to preview area
  3.     document.getElementById('preview_image').src = src;
  4.  
  5.     // Remove all active classes from images
  6.     var elements = document.getElementsByTagName('a');
  7.     for (var i = 0; i <elements.length; i++) {
  8.         if (elements[i].className == 'activeImage') {
  9.             elements[i].className = 'fadedImage';
  10.         }
  11.     }
  12.  
  13.     // Assign active class to the caller (the href which was clicked)
  14.     var wrapper = document.getElementById(wrapperID);
  15.     wrapper.className = 'activeImage';
  16. }

CSS, ki nastavi opacity nastavitev v vseh brskalnikih:

CSS:
  1. .fadedImage {
  2.     float:left;
  3.     opacity:.50;
  4.     filter: alpha(opacity=50);
  5.     -moz-opacity: 0.5;
  6.     width:95px;
  7. }

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

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript – fade efekt – jQuery – fadeIn – fadeOut – setTimeout – removeChild
  2. Javascript – document.getElementsByTagName
  3. Javascript – delci uporabne kode
  4. Spreminanje input type text v input type password – Javascript
  5. Kako ohraniti pregledno strukturo CSS dokumenta
  6. AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)
  7. Textarea defaultValute – Javascript string replace – uidatepicker onClose
  8. Operacije nad seznami – Javascript DOM – HTML select – HTML option
  9. Input background-color – spreminjanje z Javascript-om
  10. Wordpress 3 – kako dodati Lytebox oz animiran ogled slike

Dodaj komentar