| Autor | Zpráva | ||
|---|---|---|---|
| Little peg Profil |
#1 · Zasláno: 29. 7. 2010, 16:15:13
Ahoj, chtěl bych se zeptat, jestli jde v html a css udělat, že po najetí kurzorem na nějaký odkaz se objevý obrázek třeba v levém horním rohu, ikdyž ten odkaz bude někde jinde? A jestli to jde, tak mi prosím poraďte jak.
Předem děkuji za odpověď. :) |
||
| habendorf Profil |
#2 · Zasláno: 29. 7. 2010, 16:27:03
Ten obrázek musí být součástí toho linku. Na hover ho zobrazíš, polohu mu dáš pomocí abs. pozicování.
|
||
| Little peg Profil |
#3 · Zasláno: 29. 7. 2010, 16:32:30
a jak mám udělat, aby byl tou součástí, když obrázek a ten link leží úplně jende?
|
||
| Little peg Profil |
#4 · Zasláno: 29. 7. 2010, 16:33:00
habendorf:
a jak mám udělat, aby byl tou součástí, když obrázek a ten link leží úplně jende? |
||
| habendorf Profil |
#5 · Zasláno: 29. 7. 2010, 16:37:38
No v html bude součástí linku a „polohu mu dáš pomocí abs. pozicování.“
|
||
| Bubák Profil |
#6 · Zasláno: 29. 7. 2010, 17:01:50
habendorf:
Jak bys doporučit udělat zviditelnění obrázku při hoveru, vyzkoušel jsem tyhle možnosti: měnit obrázku při hoveru pozici - obrázek mimo obrazovku / požadovaná pozice měnit display - none / block měnit visibility - visible / hidden Přišlo mi, že první možnost má nejkratší zápis, ale měl jsem problém v IE7 (standard i qirk, IE6 nemám) a v IE8 ve quirku. Další dvě možnosti fungují v IE7 bez problémů. U prvé mpžnosti pomohl starý trik, jakákoliv deklarade hoveru odkazu: a:hover {visibility: visible;}Zatím bych nerad zveřejnil celý kód, ať si Little peg trápí mozkové závity a přijde aspoň s částečným řešením. |
||
| habendorf Profil |
#7 · Zasláno: 29. 7. 2010, 17:15:17 · Upravil/a: habendorf
Bubák:
První možnost je nejkratší na zápis, stačí měnit jednu souřadnici (třeba left). Ale je podle mě principiálně špatně, protože cíl je zobrazit/nezobrazit, nikoliv zobrazit/zobrazit někde v Tramtárii. A čert ví, jaká velkoplošná zařízení a s jakými rozlišeními se jednou budou používat, takže žádná hodnota nemusí být dostatečně veliká. Osobně bych použil display. |
||
| Bubák Profil |
#8 · Zasláno: 29. 7. 2010, 19:38:21 · Upravil/a: Bubák
habendorf:
„cíl je zobrazit/nezobrazit, nikoliv zobrazit/zobrazit někde v Tramtárii. A čert ví, jaká velkoplošná zařízení a s jakými rozlišeními se jednou budou používat“ Proto jsem deklaroval left jako vysokou zápornou hodnotu. Ale je fakt že při tom musím aspoň podvědomě zohlednit velikost obrázku. „Osobně bych použil display.“ Jako příznivce prohlížeče Opera nemám rád obrázky schované pomocí display, tento prohlížeč takto schované obrázky nenačítá do keše (to jsem si při psaní předešlého příspěvku neuvědomil), takže bych použil visibility. Dodatek: Obrázek by mohl být absolutně pozicovaný třebas k menu umístěnému vlevo, pak bych byl na širokém displeji s Tramtárií v háji. |
||
| Little peg Profil |
#9 · Zasláno: 29. 7. 2010, 19:39:38 · Upravil/a: Little peg
Hele moc díky!!! Nejvíc mi pomohlo to, že ten obrázek má bejt součást linku, já na to šel furt přez background v css...
A takle sem to teda vyřešil: <style>
img {position: absolute; left: 100px; top: 100px}
a img {visibility: hidden}
a:hover img {visibility: visible}
</style>
<a href="někam">Odkaz<img src="img.png" /></a> |
||
| Bubák Profil |
#10 · Zasláno: 29. 7. 2010, 19:56:12
Akorát že ten obrázek můžeš pozicovat a schovat v jedné deklaraci:
<style>
a img {position: absolute;top: 100px; left: 100px; visibility: hidden;}
a:hover img {visibility: visible;}
</style>
<a href="#">odkaz<img src="http://diskuse.jakpsatweb.cz/img/logo.png"></a> |
||
| habendorf Profil |
#11 · Zasláno: 29. 7. 2010, 19:58:38
A ještě radši
a:hover, a:hover img {visibility: visible;} |
||
| Little peg Profil |
#12 · Zasláno: 29. 7. 2010, 23:17:28
A děkuji i za doladění... :)
|
||
| Little peg Profil |
#13 · Zasláno: 29. 7. 2010, 23:20:39
Nebo se ještě zeptám, co se na tom IE6 nelíbí?
|
||
| Bubák Profil |
#14 · Zasláno: 29. 7. 2010, 23:40:02
IE6 a starší potřebuje jakoukoliv deklaraci hoveru odkazu, aby udělal hover na elementu (zde obrázku) vloženém do odkazu. Pokud ve stylech žádná taková deklarace nebyla, přidávala se neškodná (nerozhodila design a neohrozila funkci):
a:hover {visibility: visible;}habendorf to šikovně spojil do jedné deklarace a proto funkčnost není závislá na tom, zda kdesi v hlubinách svého CSS deklaruješ hover odkazu. |
||
| Little peg Profil |
#15 · Zasláno: 29. 7. 2010, 23:45:06
Jako obvykle to u IE nedává smysl :D
Tak už asi naposled děkuju za všechny odpovědi... |
||
|
Časová prodleva: 14 let
|
|||
0