| Autor | Zpráva | ||
|---|---|---|---|
| ROMAN Profil * |
#1 · Zasláno: 12. 1. 2011, 21:51:09
Zdravím, měl bych prosbičku ohledně funkce zobrazení obrázku po najetí kurzorem na odkaz, obzvlášť zarovnání obrázku vedle textu odkazu. Mám nadefinovaný takový styl:
<STYLE TYPE="text/css">
a {position:relative}
a img {display:none; width:200; position:absolute; z-index:1}
a:hover img {display:block}
</STYLE>
a odkazy s obrázky takto:
<a href="...">Obrázek jedna<img src="obr1.jpg"></a>
<br>
<a href="...">Obrázek dva<img src="obr2.jpg"></a>
<br>
<a href="...">Obrázek tři<img src="obr3.jpg"></a>
<br>
<a href="...">Obrázek čtyři<img src="obr4.jpg"></a>
<br>
<a href="...">Obrázek pět<img src="obr5.jpg"></a>
<br>
<a href="...">Obrázek šest<img src="obr6.jpg"></a>
<br>
<a href="...">Obrázek sedm<img src="obr7.jpg"></a>
Chtěl bych, aby po najetí kurzoru na text odkazu se objevil obrázek na konci textu odkazu na tom samém řádku (nejlépe zarovnat horní část obrázku s řádkem) a byl v popředí, tj. nad textem ostatních odkazů. Jak to mám nadefinované nyní, tak zarovnání obrázku hned na stejný řádek za odkaz funguje jen v IE, ale naopak tam nefunguje to, že obrázek není v popředí před textem. Ve firefoxu je to zas úplný opak, obrázky jsou sice v popředí, ale jsou zarovnané úplně vlevo, pod odkaz. Zkoušel jsem různě zadávat zarovnání a pozicování, jak v css, tak natvrdo html tagů přímo k obrázkům, ale ke kýženému výsledku jsem zatím nedošel. Mohl by mi někdo poradit, jak docílit požadovaného efektu a fungování jak v IE, tak ve firefoxu a dalších prohlížečích? |
||
|
Časová prodleva: 3 dny
|
|||
| Davex Profil |
#2 · Zasláno: 15. 1. 2011, 21:43:50
Jestli jsem to správně pochopil, tak pro standardní režim by se to mohlo opravit asi nějak takto:
<style type="text/css">
a {position:relative}
a img {display:none; width:200px; position:absolute; top: 0; right: 0; z-index:1}
a:hover img {display:inline}
</style> |
||
| ROMAN Profil * |
#3 · Zasláno: 16. 1. 2011, 10:58:46
to Davex: dík za odpověď. To pozicování top: 0; right: 0; jsem už taky zkoušel i ten parametr inline, ale stále bez kýženého efektu. Dle tvého zápisu stylu se mi to chová v IE tak, že se obrázky objevují úplně napravo a ve firefoxu naopak úplně vlevo, dokonce částečně za okrajem obrazovky.
|
||
| Davex Profil |
#4 · Zasláno: 16. 1. 2011, 14:47:27
ROMAN:
Takto se tento zápis v IE chová, když je ve zpětně kompatibilním vykreslovacím režimu. Ve Firefoxu to třeba může být způsobeno tím, že je odkaz užší než obrázek nebo něčím jiným. |
||
| ROMAN Profil * |
#5 · Zasláno: 16. 1. 2011, 22:20:32
to Davex: IE mám ve verzi 7 a kompatibilní režim zapnutý nemám. Ty odkazy nemyslím, že mám nějak moc užší než obrázek viz. zdroják výše. Prostě za použití toho tvého nadefinovaného stylu, je půl obrázku vlevo úplně mimo obrazovku. Momentálně si s tím už nevím rady. Pomalu mě napadá, že snad ani v CSS nelze vytvořit to moje požadované chování odkazu a obrázku tak, aby to bylo kompatibilní ve vícero prohlížečích. Asi se budu muset poohlédnout, jak by se to dalo vyřešit třeba java skriptem i když pomocí stylů se mi to zdálo jako elegantnější řešení.
|
||
|
Časová prodleva: 13 let
|
|||
0