na mouseover svi thumbovi opacity 50 osim hoverovanog thumba

na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 24.04.2008. u 14:48 · pre 225 meseci #1

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.

opacity.rar4.77k

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 24.04.2008. u 17:48 · pre 225 meseci #2

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

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 24.04.2008. u 18:09 · pre 225 meseci #3

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

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 25.04.2008. u 11:56 · pre 225 meseci #4

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); }
       );
    });
});

Potpis

rafforum.rs - Forum Računarskog Fakulteta

js hover opacity.zip198.95k

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 25.04.2008. u 13:14 · pre 225 meseci #5

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);
            });

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 26.04.2008. u 09:17 · pre 225 meseci #6

pokusaj za ie6 da stavis ovo u js:

Code:

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

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 01.05.2008. u 15:33 · pre 225 meseci #7

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;
}

Potpis

routing protocols enable routers to route routed protocols!

Re: na mouseover svi thumbovi opacity 50 osim hoverovanog thumba 02.05.2008. u 14:57 · pre 225 meseci #8

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...

Forum kao aplikacija na telefonu

Srodne teme