Autor Zpráva
hampy
Profil
Ahoj všem, prosím Vás, poradili byste mi někdo, jak to zařídit, aby po najetí myší na nějaký obrázek se tento obrázek změnil, resp. aby byl prostor obrázku úplně čistě bílý a po najetí myší na něj se teprve ukázal onen obrázek.

Nevím jak to zjednodušeně říci, doufám že to někdo pochopí. Jde o to že chci na stránce schovat počítadlo od Toplistu, aby se ukázalo až po tom co na něj najedu...

Díky, Hampy
habendorf
Profil
Třeba text-indent.
hampy
Profil
Vždyť text-indent je jen na nastavení odsazení prvního písmene odstavce, jak bych ho tady mohl použít?
lopik
Profil
onmouseover a onmouseout
Bubák
Profil
Jenom nevím, jestli tam bude někdo najíždět myší, když nic neuvidí, nebo je to záměr? Napsal jsem dvě možnosti, jednu z nich smaž, ale zprůsvitnění se mi líbí ;-)
Z kódu Toplistu je tady jen kousek, ale ten pozměněný, odkazu jsem přidal ID.
<style>
/* zmizeni */
a#toplist img {visibility: hidden;}
a#toplist:hover img {visibility: visible;}
a#toplist:hover {visibility: visible;} /* jakakoliv deklarace, jinak to IE nechape*/

/* zprusvitneni */
a#toplist img {filter: alpha(opacity=20); opacity:0.2; }
a#toplist:hover img {filter: alpha(opacity=100); opacity:1;}
a#toplist:hover {visibility: visible;} /* jakakoliv deklarace, jinak to IE nechape*/
</style>

<a id="toplist" href=....
hampy
Profil
zprůsvitnění funguje skvěle, děkuju mockrát ;-)

Jenom nevím, jestli tam bude někdo najíždět myší, když nic neuvidí, nebo je to záměr?

...je to záměr, nechceme, aby počítadlo od Toplistu bylo vidět, protože se tam prostě nehodí, ale na druhou stranu je krásně přehledné, jednoduché...tak tohle je fajn řešení ne? Strčím ho někam do rohu kde bude stejně prázdné místo a když budu chtít vidět jak to jde, prostě tam najedu.

Ještě jednou díky
habendorf
Profil
Vždyť text-indent je jen na nastavení odsazení prvního písmene odstavce, jak bych ho tady mohl použít?

Obrázek je také první písmeno odstavce.

Jinak opacitu bych do toho netahal, je pomalá a ne všude podporovaná.
hampy
Profil
No jo, zjistil jsem že to nefungiš v exploreru :-(

A jak bych mohl text-indent v tomhle případě použít?
habendorf
Profil
No ten img máš pravděpodobně v nějakém elementu, tipuju <a>.

a {display:block; width:50px; height:30px; overflow:hidden; text-indent:50px;}
a:hover {text-indent:0;}
a img {border:none;}

Takhle nějak by to mohlo fungovat. Šířka odkazu a hodnota text-indent je stejná jako šířka obrázku, douprav si.

Přesněji řečeno, text-indent musí být stejný nebo jakýkoliv větší.
hampy
Profil
Tak to bohužel taky nefunguje :-(

Funguje to v Mozille, ale v IE zase ne
habendorf
Profil
hampy Tak to bohužel taky nefunguje :-( Funguje to v Mozille, ale v IE zase ne

Ale houby, zkoušel jsem to, funguje to všude. Někde máš chybu.
habendorf
Profil
Tak pardon, pro Gecko vlastně musí být ten text-indent záporný.

http://stuff.1-webdesign.cz/text-indent.html funguje všude.
Bubák
Profil
Gecko vlastně musí být ten text-indent záporný.
V čem je problém? Mi to funguje úplně stejně jak s kladnou, tak zápornou hodnotou text-indent. Ve Firefoxu se to chová úplně stejně, jako v IE a Opeře.
Otestoval jsem ve Firefoxu:
Mozilla/5.0 (Windows; U; Windows NT 5.1; cs-CZ; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; cs; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; cs; rv:1.8.1) Gecko/20061010 Firefox/2.0
habendorf
Profil
V čem je problém?

Mě to ve FF 2.0 s kladným text-indentem nejelo. Mělo by, ale nejelo.
Bubák
Profil
Tohle FF "vezme" s kladným text-indent:
<a id="toplist3" href="#"><img ...

Tohle FF "nevezme" s kladným text-indent:
<a id="toplist3" href="#">
<img ...

Postupně jsem "svůj" kód upravoval přesně do podoby, v jaké ho máš ty. Rozdíly byly tři, rozměry, já jsem mám id="jakesi" a odřádkování kódu.

Jěště dodatek. Použil bych záporný text-indent, protože na odřádkování v kódu se snadno zapomene a kdo pak dá dohromady, že to v gecku po případné úpravě kódu nejede.
JOHN
Profil *
Dobry den, mam problem s hlavnym menu. Pri kazdom odkaze v menu mam obrazok, chcel by som aby sa tento obrazok menil ked sa na danu linku postavim mysou. Mam nahrate oba obzrazky no neviem ich takto prepojit. Nieco podobne ako je hore s tym /* zprusvitneni */ no ja chcem aby sa menili obrazky... Prosim napiste mi to tak ako s tym /* zprusvitneni */ polopate, aby som si to tam vedel dat :) DAKUJEM KRASNE :))) JOHN
tiso
Profil
JOHN
hľadaj v diskusii, alebo si založ novú so svojim problémom, je nevhodné pýtať sa niečo v cudzom vlákne...
habendorf
Profil
Navíc přímo v tomto threadu je to vyřešeno. Dělá se to záporným text-indentem, třeba. Samozřejmě je také možno použít třeba JS.
tiso
Profil
habendorf
a:hover s text-indentom?
habendorf
Profil
tiso: ano
habendorf
Profil
Trochu jsem zaktualizoval ten příklad na http://stuff.1-webdesign.cz/text-indent.html
tiso
Profil
habendorf
...až na to že to čo písal JOHN je niečo iné: 2 obrázky vs. 1, a "Pri kazdom odkaze v menu mam obrazok" ešte neznamená čisto obrázkové menu...
Inak: OK...
habendorf
Profil
Tak pokud je tím myšlena nějaká jakoby odrážka nebo obrázek u textu, tak potom background.
JOHN
Profil *
Prepacte, ja som naozaj nevedal, ze si treba zalozit diskusiu...naozaj som nechcel...
Toto téma je uzamčeno. Odpověď nelze zaslat.