[jQuery] Zamenjava sličic pri različnih stanjih miške

Pozdravljeni,
imam sličice, ki se obnašajo kot hiperpovezava. Vsako znamenje horoskopa
ima tri različne sličice, navadno, ko gre miška preko in ob kliku.
Uspelo mi je napisati kodo za vsako znamenje posebej.
Kako bi lahko skrajšal jQuery kodo??
Poti do slike se razlikujejo samo v imenu in v številki:
oven2, oven1, oven3...

<a href="oven.php"><img class="znamenja" id="oven" src="slike_roll/oven1.png" alt=""></a>
<a href="bik.php"><img class="znamenja" id="bik" src="slike_roll/bik1.png" alt=""></a>
...
se nadaljuje

<script>
$(document).ready(function() {
	$("#oven").ready(function () {
		$("#oven")
		    .mouseover(function () {
		        $(this).attr("src", "slike_roll/oven2.png");
		    })
		    .mouseout(function () {
		        $(this).attr("src", "slike_roll/oven1.png");
		    });
		$("#oven").mousedown(function(){
			$(this).attr("src", "slike_roll/oven3.png");
		    });	
		});	 
		
	$("#bik").ready(function () {
		$("#bik")
		    .mouseover(function () {
		        $(this).attr("src", "slike_roll/bik2.png");
		    })
		    .mouseout(function () {
		        $(this).attr("src", "slike_roll/bik1.png");
		    });
		$("#bik").mousedown(function(){
			$(this).attr("src", "slike_roll/bik3.png");
		    });	
		});	 
});
...
se nadaljuje
</script>

Če hočeš imet narejeno z jqueryjem bi naj nekak tak zgledalo:

$(".znamenja")
    $(this).mouseover(function () {
        var path="slike_roll/"+$(this).attr("id");
	$(this).attr("src", path+"2.png");
    });
    $(this).mouseout(function () {
        var path="slike_roll/"+$(this).attr("id");
        $(this).attr("src", path+"1.png");
    });
    $(this).mousedown(function(){
        var path="slike_roll/"+$(this).attr("id");
        $(this).attr("src", path+"3.png");
    }); 
});  

nisem stestiral, tak da možno, da je kje kaka napaka, ampak približno tak bi naj izgledalo.

haha keri fail pri kopiranju sem naredo :D to sem mislo drugac napisat:

    $(".znamenja").mouseover(function () {
        var path="slike_roll/"+$(this).attr("id");
        $(this).attr("src", path+"2.png");
    });
    $(".znamenja").mouseout(function () {
        var path="slike_roll/"+$(this).attr("id");
        $(this).attr("src", path+"1.png");
    });
    $(".znamenja").mousedown(function(){
        var path="slike_roll/"+$(this).attr("id");
        $(this).attr("src", path+"3.png");
    }); 

http://jsfiddle.net/QX35V/1/

fora pristopa $(document).on('click', ...); je ravno to da ni potrebe da element ki ga opisuje selektor ob času izvedbe kode obstaja, zato ga lahko daš ven iz .ready()

Primer: http://jsfiddle.net/ff374/
Če klikneš enega izmed prvih dveh "bambijev" se izvedeta oba alerta, če z klikom na "Klik" dodaš še 5 "bambijev" potem se za teh naslednjih 5 "bambijev" izvede le drugi alert, ker ob času izvedbe .click() še niso obstajali

Dejansko IE 6 in 5.5
http://caniuse.com/css-sel2

To se dela s CSS, ne tega z jQuery pisat, ker je res brezveze. Še najboljš je, da narediš background slikce in jih potem samo premikaš ob :hover in :active (poglej si http://css-tricks.com/css-sprites/).