Autor | Zpráva | ||
---|---|---|---|
jakubk0c Profil |
#1 · Zasláno: 24. 10. 2018, 07:44:10
Dobrý den,
potřeboval bych Vaší radu. Potřebuji změnit obrázek v menu, při :active; :hover. Něco jsem zkusil pohledat, a vytvořit, ale furt se mi nedaří to rozchodit. Budu vděčný, za každou radu. Zadání: Mám vždy v menu src="xxx/xxx_b.png a potřebují to změnit na src="xxx/xxx_w.png. Když je img :active; :hover má tam být obrázek src="xxx/xxx_w.png a když není src="xxx/xxx_b.png <script> $(".menu_ico").mouseover(function() { var img = $('img', this); img.attr('src', img.attr('src').replace('_b', '_w')); }); </script> </head> <body class="size-1140 primary-color-aqua"> <?php include "header.php"; ?> <section class="section"> <div class="full-width"> <div class="line"> <div class="tabs"> <nav class="background-white" > <ul> <li> <a href="#tab-1" class="active_f"> <img class="menu_ico" src="img/chci/auta_w.png"> </a> </li> <li> <a href="#tab-2"> <img class="menu_ico" src="img/chci/kola_b.png"> </a> </li> <li> <a href="#tab-3"> <img class="menu_ico" src="img/chci/brzdy_b.png"> </a> </li> <li> <a href="#tab-4"> <img class="menu_ico" src="img/chci/motor_b.png"> </a> </li> <li> <a href="#tab-5"> <img class="menu_ico" src="img/chci/okna_b.png"> ></a> </li> <li> <a href="#tab-6"> <img class="menu_ico" src="img/chci/dveře_b.png"> </a> </li> </ul> </nav> |
||
Kajman Profil |
#2 · Zasláno: 24. 10. 2018, 08:38:00
Pokud nebudete používat img, ale např. span s pozadím, tak se to dá jednoduše měnit ccs styly. Nejlepší pak je, když jsou obě varianty v jednoum obrázku, aby byla druhá načtená hned při označení a css styly ze změní jen viditelná pozice. Můžete si dát do jednoho obrázku i všechny ikony potřebné do menu.
|
||
jakubk0c Profil |
#3 · Zasláno: 24. 10. 2018, 08:44:51
Kajman:
A řešení, které jsem zkoušel? Tomu Vašemu jsem se chtěl vyhnout. Myslel, jsem, že bych vždy nahradil jen "b" za "w". |
||
T-fon Profil |
V tom případě bych to napsal takhle jednoduše:
$(this).attr('src','_w.jpg');
Edit: aha, sorry, nevšim jsem si, že ty obrázky jsou pokaždý jiný, tak tohle je bezpředmětná rada. |
||
jakubk0c Profil |
#5 · Zasláno: 24. 10. 2018, 09:06:56
T-fon:
Právě, ono by to šlo udělat po 1, ale zbytečně zdlouhavý podle mě. |
||
Kajman Profil |
#6 · Zasláno: 24. 10. 2018, 09:19:43
Možná půjde něco takového...
(function( co, cim ) { var prehod = function() { if(this && this.src) { if(this.src.indexOf(co) == -1) { this.src=this.src.replace( cim, co ); } else { this.src=this.src.replace( co, cim ); } } }; $(".menu_ico").mouseenter( prehod ).mouseleave( prehod ); })('_w.', '_b.'); |
||
Mlocik97m Profil * |
jde to udelať i spôsobom že sa vytvory array ktory bude obsahovat objekty, dvojice dat, name a src. a ono cez cyklus for iba kazdy data z kazdeho objektu vlozit do tagov (dynamicky napsat tie tagy). Ja to sice nikdy tak nerobil, lebo pouzivam angular a tam cez repeat a bind mam postarane.
Mlocik97m: ouch, sry. odpovedel som na iny dotaz... tu jak pise Kajman, skrz CSS |
||
jakubk0c Profil |
#8 · Zasláno: 24. 10. 2018, 10:15:32
Kajman:
Asi Vás poslechnu a půjdu do toho css. Ale, dík moc za pomoc :-) |
||
Bubák Profil |
#9 · Zasláno: 24. 10. 2018, 10:27:41
Pro změnu obrázku v CSS koukni na Plynulá změna obrázků
Pokud požaduješ okamžitou změnu obrázků a ne prolínačku, tak vynechej v kódu transition a namísto změny opacity měň visibility, Visibility a mám za to, že pak by to fungovalo od IE4 (sic!) výše, ale nemám jak ověřit. Jsou i další možnosti, jak to pomocí CSS udělat. Pokud má obrázek nějaký význam, mělo by se použít tagu <img ...>
Pokud je obrázek jen ilustrační, měl by se použít obrázek na pozadí elementu. Tohle pravidlo bys měl dodržet i v menu. |
||
Časová prodleva: 5 let
|
0