Mouse over fade effect

[Gunner]

Postoji li neki plugin ili nesto slicno pomocu kojeg bi mogao napraviti trazeni efekt?

Htio bih na jednoj stranici staviti crno bijelu sliku pa da kad pređem mišem preko nje da ona bude u boji.

[Tom555]

Poigraj se s ovim kodom:

<img src="ovdje stavi putanju do tvoje fotografije" style="opacity: 0.5; filter: alpha(opacity=50);" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />

[Hrvoje.T]

Naravno.ovako..

1.prvo preuzmi ovaj install paket i instalitaj ga..sva tri..http://www.joomlacontenteditor.net/downloads/editor/joomla15x/category/joomla-15-2
zatim  odeš u site panel-global configuration i pod opcijom Default WYSIWYG Editor odabereš-jce editor..zatim save.

2. zatim odeš u artikl pa kad se otvori artikl imaš jce editor instaliran.

3..prati korake..
to je to.nadam se da sam pomogao..


ps..slika jedna mora biti crna a druga color..i imaš efekt..koristim ga već dosta dugo i to je jednostavno

[Tom555]

Da, ovo što ti je jako lijepo objasnio alfagaj je puno bolje. Dakle, unutar toga editora već ima mogućnost uređivanja rollover efekta.

[Gunner]

Odlicno! Hvala obojici! Zivjeli!  :pivo:

[Gunner]

alfagaj , evo probao sam preko jce-a, naredio sam sve kako si rekao i radi perfektno. Hvala!

Zanima me nesto...molim te reci mi moze li se kako "usporiti" prijelaz iz sive u color? Ovako kad pređem mišem preko on momentalno odradi efekt, a htio bih nekako sporije da se to napravi...

[Hrvoje.T]

hm.dobro  pitanje.to je default postavka.vjerojatno postoji neka neki plugin koji to radi.budem pogledao pa javim.jer ovo je napravljeno po defaultu tako da nema mijenjanja.može u kodu ali komplicirano je.. :nevin:

[Gunner]

Dobro, hvala ti! Ako u međuvremenu naiđem na rješenje, stavim ga ovdje.

[Gunner]

alfagaj , nasao sam nesto ovako, no nisam siguran moze li to pomoci u joomli. Sta mislis?

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

http://webdesignerwall.com/demo/html5-grayscale/

P.S. ispricavam se unaprijed ako sam stavio nesto sto se ne smije...

[Hrvoje.T]

naravno da može pomoći jquery..samo podesiš parametre i to je to..svaka čast..sada i drugi znaju.. 0:)

[Gunner]

Pokusavao sam napraviti doticni efekt preko jquerya, ali nije mi polazilo za rukom. No dobro, malo sam dalje trazio i u biti sam nasao jednostavno rjesenje: plugin YOUeffects!

Evo kratki tutorijal:

1. skinete plugin i uredno ga instalirate
2. morate imati dvije slike, jedna crno-bijela (siva) i jednu u boji - ovdje je jako bitno da slika u boji ima dodatak _spotlight u imenu, npr. nebo.png - nebo_spotlight.png (primjecujete da su slike s ekstenzijom .png)
3. u clanak upisete sljedeci kod: <div class="spotlight" style="background: url(images/putanja do vase slike/nebo.png); width: 240px; height: 180px;"> - bitno je da dimenzije c/b slike i u boji budu jednake (dimenzije sami definirate u px koliko vam treba)
4. save, refresh i imate lijep, spori prijelaz (efekt) na vasoj slici

P.S. jedino sto me jos muci kako da centriram tu sliku na sredinu stranice? Ima netko prijelog?
edit: da bi se poravnalo po sredini treba dodati u style.css na kraju dio: .spotlight {margin:0 auto} i onda sve radi

[ikiK]

Fora plug in, thnx!