Autor Zpráva
bsak
Profil *
Čau, jak mám udělat, aby se mi tlačítko po najetí změnilo ( v tomto případě rozsvítilo) Mám dva obrázky. Jedno nesvítící (tlacitko01) a druhé svítící (tlacitko02).
V css to mám takhle:

.button01 {position: absolute;
background-image: url(images/tlacitko01.jpg);
width: 91px; height: 37px;
top: 244px; left: 290px;
jak to tedy udělat v css?
Petr Tichý
Profil
http://wellstyled.com/css-nopreload-rollovers.html
bsak
Profil *
Zkouším, ale nějak mi to nejde, mohl bych poprosit někoho o názornou ukázku u mého příkladu? Moc bych vám byl vděčen.
Bubák
Profil
a.button01 {
display: block;
position: absolute;
background: url(images/tlacitko01.jpg);
width: 91px; height: 37px;
top: 244px; left: 290px;
jak to tedy udělat v css?
}

a.button01:hover, a.button01:active, a.button01:focus {
background-position: bottom;
}

Formát JPEG není příliš vhodný pro malé obrázky, jako třeba tlačítka. Ale hlavně si udělej ze dvoi obrázků jeden.

Maximálně ořezaná verze toho, co odkazuje Petr Tichý, je:
http://teststranek.kvalitne.cz/css-rollover/
Možná to snáz pochopíš.
bsak
Profil *
Stále to nefunguje. Je tam pořád to první tlačítko a ani po najetí se nemění. Udělal jsem si jeden obrázek. a kód mám takto:

.button01 {
display: block;
position: absolute;
background: url(images/tlacitko01.jpg);
width: 91px; height: 37px;
top: 244px; left: 290px;
}

.button01 a:hover, .button01 a:active, .button01 a:focus {
background-position: bottom;
}

a v html:
<div class="button01"><a href="#"></a></div>
bsak
Profil *
už to funguje, díky vám všem moc za rady.
Bubák
Profil
<div class="button01"><a href="#"></a></div>

Já předpokládal:
<a class="button01" href="#"></a>
<a class="button02" href="#"></a>
...
bsak
Profil *
ještě jeden dotaz k těm zdvojeným tlačítkům. Většina jich funguje správně. Ale několik se jich po najetí posune o jeden px dolů. Tuto chybu to ovšem dělá jen v IE. Ovšem nechápu, že to dělá jen u některých takových tlačítek. Vše mám stejně nastylované. Tlačítka sou stejná, přesto, když najedu kurzorem na tlačítko, tlačítko ( v tomto případě tlacitko02) se mi v IE posune o jeden px takže to tlačítko jakoby trochu poskočí. Nevíte, kde by mohla být chyba?

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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