JCE opacity image

[darioklc]

Pozdrav!
Zanima me kako u JCE-u napraviti da mi slika ima opacity 0.4, prelaskom mišem preko like je opacity 1 i da se onda vrati na 0.4 kada maknem miš sa slike?
Kod za to bi bio ovakav:

Kod [Odaberi] Expand

<img style="display: block; margin-left: auto; margin-right: auto; opacity: 0.4;" alt="Facebook" src="images/stranica/facebook.png" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.4" height="32" width="32" />

Međutim kada to probam napraviti preko JCEa onda nemrem. U postavkama slike vidim da mi je na rolloveru pod
mouseover: this.style.opacity=1 ,a pod
mouseout: this.style.opacity=0.4
a u styleu slike stavim: display: block; margin-left: auto; margin-right: auto; opacity: 0.4;

onda mi ni ne prikaze sliku na stranicu a kod mi bude:

Kod [Odaberi] Expand

<img onmouseover="this.src='this.style.opacity=1';" onmouseout="this.src='this.style.opacity=0.4';" style="display: block; margin-left: auto; margin-right: auto; opacity: 0.4;" alt="facebook" src="images/stranica/facebook.png" height="32" width="32" />

Jel moguće tako nešto izvesti preko JCEa a ne pisanjem koda?

[Dario]

Neznam iskreno da li postoji neki razlog zašto to radiš javaScriptom, ali ja bi to napravio preko css-a.... Prednost je što ti CSS to daleko brže renderira i ne "štekaju" animacije...
dakle ja bi to ovako... recimo da daš toj svojoj sliki samo neku klasu "animiranaSlika"

Kod [Odaberi] Expand


img.animiranaSlika {
opacity: 0.4;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
transition: all 200ms;
}
a.animiraniGumb:hover, a.animiraniGumb:active {
opacity: 1.0;
}

ovaj transition u gumbiću će ti napraviti onako fini fade efekt na sve promjene, dakle ako u hover još staviš drugačiju boju * i onda će se pretopisi.

P.S. samo da te upozorim da opacity ne radi u, naravno... IE7 (ak se ne varam) i niže
P.P.S. ako hoćeš da se mijenja samo opacity bez ostalih efekti, zamjeni ko transitiona "all" u "opacity"