| Autor | Zpráva | ||
|---|---|---|---|
| Niky Profil * |
#1 · Zasláno: 16. 9. 2008, 21:41:34
Ahojky, mám menší problém. Mám textový odkaz, před kterým mám obrázek jako odrážku. A já bych potřebovala, aby se mi při najetí myší změnila jak barva txtu, tak i obrázku.
U textu jsem to vyřešila takto: a:link {color: #051280;} a:visited {color: #051280;} a:active {color: #FFFFFF;} a:hover {color: #FFFFFF; text-decoration: blink;} --- Ale jak to udělat s obrázkem? Vím, jak to napsat, aby se obráze měnil. Problém e všek v tom, že obrázek se změní, jen když se najee přímo na něj, ne však, když se najede na text. No, pro lepíš pochopení zde máte ukázku: <a href="uvod.html" target="iframe"><img src="obrazky/pac.gif" width="20" height="16" border="0" onmouseover="this.src = 'obrazky/pac2.png';" onmouseout="this.src = 'obrazky/pac1.png';">Úvod</a><br> <a href="novinky.html" target="iframe"><img src="obrazky/pac.gif" width="20" height="16" border="0" onmouseover="this.src = 'obrazky/pac2.png';" onmouseout="this.src = 'obrazky/pac1.png';">Novinky</a><br> Zkrátka a dobře, ten obrázej je součástí odkazu. A proto bych chtěla, aby se měnil spolus textem a ne při individuálnímm najetí myši. Dá se stím něco udělat? |
||
| Tomashek Profil |
#2 · Zasláno: 16. 9. 2008, 21:56:21
udělej si normálně ve stylu background-image a v hoveru to same jenže s jimým obrázkem
|
||
| Niky Profil * |
#3 · Zasláno: 16. 9. 2008, 21:58:47
jak by měl ten zápis prosím vypadat?
|
||
| Tomashek Profil |
#4 · Zasláno: 16. 9. 2008, 22:04:42
no zkus něco jako tohle:
a:link,a:visited { color: #051280; display: block; width:x; height:y; background:url(cesta k obrazku) no-repeat; } a:hover { color: #FFFFFF; text-decoration: blink; display: block; width:x; height:y; background:url(cesta k druhému obrazku) no-repeat; } |
||
| Niky Profil * |
#5 · Zasláno: 16. 9. 2008, 22:37:44
No, přesně takhle jsem si to představovala. Akorát jsme musela před ten text vložit pár mezer nbsp; aby mi ten obrázek nesplýval s textem.
Jenom bych ještě potřebovala nadefinovat, aby se mi toto vztahovalo jen k něklterým odkazům. Tuším, že se to řeší pomocí class? mám totiž i jiné oskazy, u kterých toto nechci. |
||
| Mistr Profil |
#6 · Zasláno: 16. 9. 2008, 22:50:56
|
||
| Bubák Profil |
#7 · Zasláno: 17. 9. 2008, 00:38:10
„jak by měl ten zápis prosím vypadat?“
Já to dělám takto (koukni do zdrojáku): http://teststranek.kvalitne.cz/menu-odrazkove-1/ |
||
| joe Profil |
#8 · Zasláno: 17. 9. 2008, 00:43:59
Niky
Nastav třídu odkazům, u kterých to chceš provést. nbsp; nikde nepiš, použij padding-left: 20px; Pak bude to bude vypadat nějak takhle a.odrazka { padding-left: 20px; background: url('images/bullet.gif') left top no-repeat;
a.odrazka:hover { background-position: left -50px; } } |
||
| Bubák Profil |
#9 · Zasláno: 17. 9. 2008, 01:16:45
„Druhý obrázek nenačítej, použij jen jeden obrázek, kde budeš mít dvě ty odrážky, třeba pod sebou s nějakým větším rozestupem.“
Nějak takto: http://teststranek.kvalitne.cz/menu5/ |
||
| joe Profil |
#10 · Zasláno: 17. 9. 2008, 12:39:03
Bubák
Takhle právě ne :-) Nemáš v obrázku ty dva stavy od sebe dost vzdálené a při zvětšení písma se stane, že máš položku menu a máš tam oba obrázky... Navíc je podle mě lepší, když je to jeden obrázek a to z toho důvodu, že to bude méně problikávat a pak taky proto, že to bude zabírat méně dat na disku, alespoň ve více případech. |
||
|
Časová prodleva: 16 let
|
|||
0