Witam,

Ponizej podaje moj kod do zamiany obrazka;

[HTML] pobierz, plaintext 
<img src="./img/menu/1.png" alt="" id="menu1" />
<img src="./img/menu/2.png" alt="" id="menu2" />
<img src="./img/menu/3.png" alt="" id="menu3" />
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
$(function() {
	$('#menu1').mouseover(function() {
		$(this).attr('src','./img/menu/_1.png');
	});
 
	$('#menu1').mouseout(function() {
		$(this).attr('src','./img/menu/1.png');
	});
 
	$('#menu2').mouseover(function() {
		$(this).attr('src','./img/menu/_2.png');
	});
 
	$('#menu2').mouseout(function() {
		$(this).attr('src','./img/menu/2.png');
	});
 
	$('#menu3').mouseover(function() {
		$(this).attr('src','./img/menu/_3.png');
	});
 
	$('#menu3').mouseout(function() {
		$(this).attr('src','./img/menu/3.png');
	});
});
[PHP] pobierz, plaintext 

Problem mój polega na tym ze nie wiem jak zoptymalizować kod aby nie duplikować kodu przy każdym nowym dodaniu zdjęcia.
Chodzi o to ze chciałbym aby dla każdego zdjęcia o np id="menu" wykonywała się funkcja zamieniająca atrybut src na taki jak widać powyżej w kodzie. Atrybut ten różni się jedynie podkreśleniem przed nazwa. Główny mój problem to to że nie wiem jak pobrać dane elementu dokładnie tego który został najechany spośród elementów o tym samym identyfikatorze oraz zmienic atrybuty akurat tego elementu.

Może dodaj do obrazków wspólną klasę np.

[HTML] pobierz, plaintext 
<img src="./img/menu/1.png" alt="" id="menu1" class="menu" />
<img src="./img/menu/2.png" alt="" id="menu2" class="menu"/>
.....
[HTML] pobierz, plaintext 

i potem wykorzystaj .index() tzn.

[JAVASCRIPT] pobierz, plaintext 
	$('.menu').mouseover(function() {
 
$(this).attr('src','./img/menu/_'+ $(this).index() +'.png');
});
 
$('.menu').mouseout(function() {
$(this).attr('src','./img/menu/'+ $(this).index() +'.png');
});
[JAVASCRIPT] pobierz, plaintext 

Pisałem z palca więc sorry za możliwe błędy