Autor Zpráva
hugo123
Profil *
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 *
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
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
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 *
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
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 *
Chamurappi:
no nie je sucastou, mam tam <a href="" id="logo"></a>

Je to zle?
panther
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: