Ste vedeli? Podjetje TRSPLET s.p. je 4.maja 2015 spletno stran preusmerilo na Optiweb.

Podjetje Optiweb je na trgu že 6 let in ponuja celostno storitev spletnega nastopa. Poskrbimo za izdelavo spletnih strani na sistemu Wordpress in spletnih trgovin na platformi Magento.

Ukvarjamo se tudi z različnimi kanali spletnega marketinga; od različnih Google Adwords oglasov do Facebook oglaševanja. Posebej ponosni smo na naše uspehe pri optimizaciji spletnih mest za iskalnike, kjer že od začetka dosegamo odlične rezultate.

Želite predloge in nasvete, kako izboljšati vaš spletni nastop? Kontaktirajte nas prek
spletnega obrazca.

kuverta Lahko pa se vpišete tudi na seznam prejemnikov naših mesečnih e-novic, v katerih predstavljamo najnovejše trende (poslovnega) spletnega sveta. Nanje se lahko prijavite tukaj.

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.