Problém s tlačítkama ( CSS )

Mám problém s tlačítkama. Chci, aby když se na nějaké tlačítko klikne, tak aby se změnil obrázek jeho pozadí. Mám udělané, že když na něj najedu, zobrazí se mi ten obrázek jiný a chci udělat, aby když na to najedu a kliknu, tak aby se obrázek změnil na jiný, nebo zůstal takový, jaký je při najetí myší.

Děkuji za rady.
lool ty si lamáq takovou základní věc nevědět :-)


pro ostatní, kteří nevědí proč jsem mu odepsal tohle:
...je ze stejného ročníku :d
tohle CSS nevyřeší, to se vyrobí přes JS. Najdeš si objekt obrázku a vyměníš mu src.
Milý smralavý Ondřeji. Já jsem sem ten dotaz položil, protože jsem chtěl radu. Ty to na svých stránkých nemáš, tak nevím, proč tady musíš kritizovat mě. Každý umí něco jiného. Ty umíš líp PHP a mySQL, já umím líp programování v Delphi a servis PC. Ty máš větší návštěvnost stránek, mě jednou za týden volá známý s problémem na PC. Uvědom si, že každý není geniální, ani ty ne a každý vyniká v něčem jiném.

Jinak: Za ostatní rady děkuji všem!
to je sice pravda, ale zamysli se první nad tím, co sem píšeš ;-)

Tvůj dotaz se dá najít během 30 sekund na http://www.jakpsatweb.cz/
je tohle to, co hledáš?
http://wellstyled.com/css-nopreload-rollovers.html
pánové, nechte si to na doma...

reseni z wellstyled je pekne, ale prijde mi to, jako pouzivat raketoplan misto ponorky. lze to, ale za lepsi variantu povazuji pouziti JavaScriptu:

<img src="out.png" onmouseover="this.src='over.png';" onmouseout="this.src='out.png';"/>
= Tomáš Hejda =
To je presne ten raketoplan :)
Uplne nejlepsi reseni je podle mne pres JS, ktere pouzijes na celou skupinu prvku nikoliv to smatlat po jednom

<div id="menu">
<img src="imgA1.png" width=".." height=".." alt="..">
<img src="..." width=".." height=".." alt="..">
<img src="..." width=".." height=".." alt="..">
</div>

<script>
cyklus pro vsechny IMG v ID="menu" nastav
onmouseover="this.src='imgA2.png';" onmouseout="this.src='imgA1.png';"
</script>
A to jeste bych to nahrazoval regularnim vyrazem pripadne volal neco jako funkci
onmouseover="zmen_obrazek(this,2)" onmouseout="zmen_obrazek(this,1)"
a proc rovnou neudelat tohle (mozna tam budou chyby, neladim to, jen pisu):

<?
function mouseimage($outsrc, $oversrc, $title=false){
if(!$title) $title=$outsrc;
echo "<img src=\"{$outsrc}\" onmouseover=\"this.src=\'{$oversrc}\';\" onmouseout=\"this.src=\'{$outsrc}\';\" title=\"{$title}\" alt=\"{$title}\" />\n";
}

mouseimage("./normal.png", "./over.png", "popisek");
?>
Tomáš Hejda: raketoplán je taky fajn. Já na raketoplánech postavil celý web. Ponorku už nechci ani vidět.

Jak jsem koukal na Tomášův web, tak jsem pochopil, že chce v menu zvýraznit odkaz na tu stránku, kde zrovna je. Ideální je podle mě přidávat k elementu atribut - třídu. Pak není težké napsat do stylesheetu pro danou třídu nějaké pozadí a jiné srandy. Jelikož nerad vidím javascript tam, kde to není nutné a Tomáš se zdá se kamarádí s php, může kontrolovat při vypisování menu aktuální adresu ($_SERVER["REQUEST_URI"]) a případně doplnit definici třídy.
= Tomáš Hejda (tohe.wz.cz) =
"a proc rovnou neudelat tohle "
protoze je to v PHP a protoze ti pak pribyva HTML kod, ktery se musi stahovat. Kdezto pridelanim mysky pres vnejsi JS vyzaduje jen 1 radek na LINK JS, ktery tam stejne mas kvuli jinym efektum.
Ale je to take reseni...
peta: nevidim v asi 50B na odkaz takovy problem, kdyz napr. tato diskuse posila 7kB...
Zalezi na tom...
<ul id="menu">
<li><a href="stranka.htm">Odkaz1</a></li>
<li><a href="stranka.htm">Odkaz1</a></li>
<li><a href="stranka.htm">Odkaz1</a></li>
</ul>

<menu>
<li><a href="stranka.htm" onmouseover="efekt(1)" onmouseout="efekt(2)">Odkaz1</a></li>
<li><a href="stranka.htm" onmouseover="efekt(1)" onmouseout="efekt(2)">Odkaz1</a></li>
<li><a href="stranka.htm" onmouseover="efekt(1)" onmouseout="efekt(2)">Odkaz1</a></li>
</menu>

Mi to prijde skoro 2x takova velikost a jestlize se ma timto kodem prolouskavat google pri vetsim poctu odkazu, tak je mozne, ze ti posune stranku v katalogu o neco niz.
Je to efekt javascriptu, vyhodil bych to do externiho JS souboru