Autor | Zpráva | ||
---|---|---|---|
hugo123 Profil * |
#1 · Zasláno: 25. 11. 2012, 15:02:22
Ahojte,
chcel by som spravit nieco take, ze mam na spodku stranky zobrazene nefarebne logo projektu. A potom chcem, ked pridem mysou na to logo, tak sa u neho stane farebne logo. Je to taky pekny efekt, ktory pouziva vela stranok. Prosim Vas, ako to najlepsie spravit? Cez CSS, JS (mozem aj jQuery), alebo? A viete mi prosim priblizne nacrtnut, ako to dosiahnut? Budem vam velmi vdacny za akekolvek rady. Vopred dakujem velmi pekne. |
||
Monkeys Profil * |
#2 · Zasláno: 25. 11. 2012, 15:20:15
napr:
.logo img {background:url(cesta_k_nefarebnemu_logu.png) no-repeat 0px 0px;} .logo img:hover {background:url(cesta_k_farebnemu_logu.png) no-repeat 0px 0px;} M. |
||
user243 Profil |
#3 · Zasláno: 25. 11. 2012, 15:21:14
hoj,
můžeš to udělat třeba jen pomocí css; stačí si v nějakém grafickém editoru vytvořit obrázek, kde budeš mít jak logo a vedle, nebo pod něj dáš barevné logo (musí být v horizontální nebo vertikální rovině s předešlým obrázkem - logem); ten obrázek použiješ jako pozadí pro odkaz, kterému nastavíš výšku a šířku tvého loga + display:block; pak tomu odkazu nastavíš při najetí kurzorem, tedy :hover vlastnost background-position a posuneš pozadí v ose x nebo y o tolik px, aby bylo vidět berevné logo; nemusíš obrázky spojovat, prostě nastavíš pozadí obyčejným logem a při najetí změníš cestu k barevnému logu, ale to barevné logo se musí načíst; nemusíš používat odkaz, ale třeba div nebo jiný tag (horší podpora u ie); |
||
joe Profil |
#4 · Zasláno: 25. 11. 2012, 15:27:48
1. Pomocí obrázků
a) každý obrázek zvlášť b) jednoho obrázku, kde to bude spojené 2. Pomocí CSS s tím, že to nebude fungovat všude. 3. Pomocí JavaScriptu |
||
Petr ZZZ Profil |
Reaguji na huga123:
Bubák má na stránce didakticky pěkně udělané příklady v CSS (Joeova poznámka „pomocí CSS s tím, že to nebude fungovat všude“ se vztahuje na CSS3; Bubákovy příklady by měly fungovat ve všech majoritních prohlížečích). |
||
hugo123 Profil * |
#6 · Zasláno: 26. 11. 2012, 00:55:26
Monkeys, joe, Petr ZZZ:
Dakujem velmi pekne za vase nazory. Spravil som to nakoniec tak, ze mam jeden obrazok, na nom 2 loga a potom cez Jquery metodu .hover() menim backgroundPosition z top na bottom. Funguje to, a malo by to ist aj v IE6, co ma tesi, pretoze ten web navstevuju skor starsi ludia. |
||
Chamurappi Profil |
#7 · Zasláno: 26. 11. 2012, 01:24:31
Reaguji na huga123:
„potom cez Jquery metodu .hover()“ Proč nepoužiješ obyčejný :hover ? Logo je stejně předpokládám součástí odkazu, takže by pseudotřída fungovala i ve starších Explorerech.
|
||
hugo123 Profil * |
#8 · Zasláno: 26. 11. 2012, 10:35:00
Chamurappi:
no nie je sucastou, mam tam <a href="" id="logo"></a> Je to zle? |
||
panther Profil |
#9 · Zasláno: 26. 11. 2012, 12:18:58
hugo123:
„no nie je sucastou, mam tam <a href="" id="logo"></a>“ není to zle, logo je odkaz, proto na něj můžeš aplikovat #logo:hover {} bez nutnosti spoléhat se na podporu JS.
|
||
Časová prodleva: 11 let
|
0