PCTuning fórum

Ahoj,
mám následující problém:

Mám menu, které je tvořeno obrázky ( designovaný text), po najetí kurzorem se obrázek změní na jiný (text se rozsvítí). Ovšem potřebuji, aby po kliknutí na ten obrázek zůstal obrázek změněn na ten druhý(tzn. s rozsvíceným textem) a až po dalším kliknutí by zase zhasnul...

Zkoušel jsem to přes JS respektive přes jQuery, ale bez výsledku...

Prosím o radu, předem díky

Takhle je udělaný ten hover:

Kód: Vybrat vše

<img onmouseover="this.src = 'images/index_05h.jpg';" onmouseout="this.src = 'images/index_05.jpg';" src="images/index_05.jpg" width="99" height="36" alt="">

To tak neuděláš, to aby tam byl jiný musíš vyřešit na dané stránce, na které tě to odkáže. Můžeš řešit přes JS nebo PHP, je jedno...
Pokud děláš "natvrdo" v HTML pouze, tak to uděláš na každé stránce tak aby svítil.

Díky za reakci, jj to vím, v html by to nebyl problém, ale já to mám tak, že celý web je pouze jedna html stránka a ty odkazy s pomocí JS (funkce slideToggle) zobrazují a schovávají další obsah. Určitě to půjde udělat nějak v tom JS pomocí událostí, jen nevím jak

Počkej, ty máš jednu stránku, a ten obsah co se mění po kliknutí je pomocí AJAXu? Nebo ty načteš rovnou všechen obsah. Kdyby jsi to měl někde na netu, ať to vidím, nebylo by to špatné, pokud teda to není "tajné"

určitě to tajné není

tady je odkaz http://www.murb.own.cz

Mrknu se ti na to zítra, jenom si rozmysli, jak doopravdy chceš aby to fungovalo, aby to svítilo, do doby, než se ten odstavec zase shová, nebo do doby, než se klikne na jiný odkaz?

jj dobře díky, chci aby to svítilo do doby, než se ten odstavec zase schová.

Dneska mi to asi nemyslí, nenapadá mě nic funkčního. Jenom k tomu řešení, ty jednotlivé položky bych nedával přes odkaz. Teďka si otevřu třeba všechny položky, ale pak scrolluju trochu dolů, ale stále vidím to menu, a když kliknu, tak mě to hodí na vrch stránky (protože máš odkaz na #) proto bych to buď řešil jenom pomocí obrázku.
Nebo si u toho eventu klikacího dej

Kód: Vybrat vše

$("#schovavac1").click(function(e){
    e.preventDefault();
    $("#muj_odstavec1"). slideToggle("slow");
  });

viz http://api.jquery.com/event.preventDefault/

Dále nechápu proč máš v tom kódu toto

Kód: Vybrat vše

$("#muj_odstavec").toggle();

protože toto ti nic neudělá... Zbytečné

Edit:\\
Už chápu, proč tam máš ten kód co "nic" nedělá. Je jenom zbytečné ho tam dávat, lepší je tam dát pouze .hide(), ušetří to čas. Dále se nauč používat rozsáhlejší selektory, to co tam máš napsané na 5 řádků, by šlo na jeden.

Kód: Vybrat vše

$("#muj_odstavec, #muj_odstavec1, #muj_odstavec2, #muj_odstavec3, #muj_odstavec4, #muj_odstavec5").toggle();

jenom to toogle() nahraď za .hide();
Asi už mě napadlo jak bych to řešil.
Buď bych si udělal pomocné proměnné, do kterých bych si uložil jaký je stav toho tlačítka. To co máš v HTML smaž, (myslím ty onmouseout a onmouseover) a toto bych udělal přes jQuery, jenom do té funkce bych dal podmínku, že se to změní pouze pokud bude ta pomocná proměnná v nějaké hodnotě. A při kliknutí bych tu proměnnou nějak nastavil a zobrazil, po dalším kliknutí bych ji zase vrátil na původní hodnotu a obrázek opět přeměnil.

Druhá možnost je pomocí unbind(), na začátku nastavíš na všechno všechny eventy, a potom, když na některý obrázek klikneš, změníš jeho adresu k obrázku, a taky použiješ pro ten obrázek unbind() na mouseOver a mouseOut, tím zrušíš, aby se po najetí a odjetí dělala nějaká akce, a potom, když obsah zase skryješ, tak je jenom nabinduješ znova.

P.S. Pro modernější prohlížeče můžeš ten efekt udělat pouze pomocí CSS3, podívej se na atribut text-shadow a box-shadow. CSS3 je docela dobře popsaná zde: http://www.css3.info Moderní prohlížeč myslím např: Opera od 10.50, Firefox od verze 4.0, IE verze 9, a Chrome ani nevím... těch vychází tak hodně, už jsem ztratil přehled.

Díky za radu, konečně jsem si opět našel čas a trochu se do toho zase pustil. Už jsem to teda poupravil, je tam změněno to toggle() na hide(), přidal jsem tam i ten event.preventDefault. Akorát mi to nějak nefungovalo s tím selektorem... chápu jak to myslíš, opravdu to ušetří dost času a práce, ale prostě to nejelo. Při klepnutí na jeden z odkazů se otevřelo/zavřelo vše.

No a ten hlavní problém asi zkusím vyřešit přes to unbind()... budu se ale ještě muset podívat do dokumentace...

Díky za pomoc

Ten selektor totiž můžeš použít pouze u toho .hide(); nikde jinde ho logicky použít nesmíš!!! Zbytek musíš mít rozepsaný tak jak ho máš.

Jedině co mě napadlo, že by jsi měl ten hromadný selektor, v tom .click() a pak uvnitř té funkce by jsi neměl $("#nejake divy") ale $(this) V tom this by totiž měl být pouze odkaz na ten daný na který jsi klikl, z něho by se pak dal vytáhnout název, a pokud by jsi třeba klikal na #weby a tím jsi otevíral #weby_obsah tak pomocí toho this by jsi mohl udělat $($(this)[0].id+"_obsah").slideToogle(); jenom nevím, jestli už to není moc přeplácané, ale fungovalo by to na 99%

jo s tím selektorem už jsem na to přišel, nějak mi to včera večer nemyslelo nebo co..

PCTuning fórum

Img hover

Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover

Re: Img hover