[es] - na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

CtrlAltDel
Beograd

Član broj: 96286
Poruke: 323
*.neobee.net.

Profil

na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{24.04.2008. u 13:48}

kao sto rece naslov. imam grupu slika , kad se predje preko bilo koje sve ostale treba da dobiju poluprovidnost osim hoverovanog...
e sad to sam izveo ali prilikom prelaska sa jedne na drugu sliku javlja se "treptanje" tj. vrati opacity na 100 i onda opet smanji...

to je zbog razmaka izmedju slika pa sam primenio javascript funkciju na li elemente koje sam dodao oko svake slike... e tu je problem sto hoverovanom li elementu ne mogu da iscupam child img element... a to je sve naravno jer sam tanak sa javascriptom.

i da, znam da ce ovo da radi samo u ie, ali posle cu da doteram opacity za firefox

pa pomagajte ako mozete , ne mogu da spavam koliko razmisljam o prokletinji - znate vec kako ide...
prilazem iskarikiran fajl.

Prikačeni fajlovi

opacity.rar - 4.77k

^{24.04.2008. u 13:48}

Aleksandar Ružičić
Software Developer, Joker Games d.o.o.
Beograd

SuperModerator
Član broj: 26939
Poruke: 2850
*.medianis.net.

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{24.04.2008. u 16:48}

nisam gledao tvoj kod, ali evo kako bi ja to resio:

html:

Code:

<div id="gallery">
   <img src="...">
   <img src="...">
   <img src="...">
   <img src="...">
   ...
</div>

javascript (ovo zahteva jQuery biblioteku:

Code:

$(function()
{
     $('#gallery>img').each(function()
      {
          $(this).hover
           (
               function(){ $(this).parent().find('>img').not(this).css('opacity', 0.5); $(this).css('opacity', 1); },
               function(){ $(this).parent().find('>img').css('opacity', 1); },
           );
      });
});

p.s. nisam proveravao ali trebalo bi da radi

W3 Schools - An Intervention
rafforum.rs - Forum Računarskog Fakulteta

^{24.04.2008. u 16:48}

CtrlAltDel
Beograd

Član broj: 96286
Poruke: 323
*.neobee.net.

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{24.04.2008. u 17:09}

ne radi nista... hvala u svakom slucaju
( naravno attachovao sam jquery )

^{24.04.2008. u 17:09}

Aleksandar Ružičić
Software Developer, Joker Games d.o.o.
Beograd

SuperModerator
Član broj: 26939
Poruke: 2850
*.medianis.net.

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{25.04.2008. u 10:56}

sad sam probao, radi, samo sto sam u tom kodu stavio zarez viska (posle druge f-je u hover eventu ne ide zarez...)

evo okacio sam ti zip da vidis...

mada moze i jednostavnije da se napise:

Code:

$(function()
{
    $('#gallery>img').css('opacity', 0.5).each(function()
    {
      $(this).hover
       (
           function(){ $(this).css('opacity', 1.0); },
           function(){ $(this).css('opacity', 0.5); }
       );
    });
});

_{[Ovu poruku je menjao Aleksandar Ružičić dana 25.04.2008. u 12:10 GMT+1]}

W3 Schools - An Intervention
rafforum.rs - Forum Računarskog Fakulteta

Prikačeni fajlovi

js hover opacity.zip - 198.95k

^{25.04.2008. u 10:56}

CtrlAltDel
Beograd

Član broj: 96286
Poruke: 323
*.neobee.net.

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{25.04.2008. u 12:14}

probao sam , ali ako podesim efekat kao u mom primeru opet se javlja "blicanje" pri prelasku sa jedne slike na drugu.
zbog toga sam dodao li tag oko svake slike, promenio malo js i blicanje je nestalo ... makar u ff , ie6 je naravno ie6 pa se ponasa kako mu dune...

hvala puno , to mi je trebalo

Code:

    $(function()
            {
                $('#gallery>li').each(function()
                {
                  $(this).hover
                   (
                       function(){ $(this).parent().find('>li').not(this).css('opacity', 0.5); $(this).css('opacity', 1);  },
                       function(){ $(this).parent().find('>li').css('opacity', 1); }
                   );
                })
                .css('opacity', 1);
            });

^{25.04.2008. u 12:14}

Aleksandar Ružičić
Software Developer, Joker Games d.o.o.
Beograd

SuperModerator
Član broj: 26939
Poruke: 2850
*.medianis.net.

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{26.04.2008. u 08:17}

pokusaj za ie6 da stavis ovo u js:

Code:

if ($.browser.msie)
{
try { document.execCommand('BackgroundImageCache', false, true); } catch (o) {}
}

W3 Schools - An Intervention
rafforum.rs - Forum Računarskog Fakulteta

^{26.04.2008. u 08:17}

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 794
77.28.134.*

Sajt: right-sock.net

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{01.05.2008. u 14:33}

Ne znam zasto ti treba ovo, ali zasto ne koristis CSS?

Evo, trenutno radim na http://www.sutel.com.mk/mk/ i pretpostavljam da ti treba nesto u stilu kao one dve slikice desno (Live Chat i Live Streaming), a ovde ti se nalazi slika http://www.sutel.com.mk/images/design/live-chat.gif

Evo ti koda:

Code:

#livechat {
    background-image: url(images/design/live-chat.gif);
    background-position: bottom;
    display: block;
    width: 187px;
    height: 49px;
    margin: 10px auto;
}
#livechat:hover {
    background-position: top;
}

routing protocols enable routers to route routed protocols!

^{01.05.2008. u 14:33}

CtrlAltDel
Beograd

Član broj: 96286
Poruke: 323
*.neobee.net.

Profil

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

^{02.05.2008. u 13:57}

ne koristim css iz sledecih razloga>

kao sto rece naslov. imam grupu slika , kad se predje preko bilo koje sve ostale treba da dobiju poluprovidnost osim hoverovanog...
znaci sve osim hoverovane postaju poluprovidne a hoverovanoj ostaje opacity 100%...

druga stvar, ovo sa background je ok tehnika kad imas par slika , ali sta cu kad primenim na galeriju od npr 50 slika... da pravim duple slike nije bas pametno.
hvala u svakom slucaju na predlogu...

u svakom slucaju reseno je uz veliku Aleksandrovu pomoc...

^{02.05.2008. u 13:57}