Autor Zpráva
Niky
Profil *
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
udělej si normálně ve stylu background-image a v hoveru to same jenže s jimým obrázkem
Niky
Profil *
jak by měl ten zápis prosím vypadat?
Tomashek
Profil
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 *
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
Niky
Tuším, že se to řeší pomocí class?
Ano, správně. Dělá se to pomocí class.
Bubák
Profil
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
Niky
Nastav třídu odkazům, u kterých to chceš provést.

nbsp; nikde nepiš, použij
padding-left: 20px;
třeba. 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.

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
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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