| 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