Witam,
Ponizej podaje moj kod do zamiany obrazka;
<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" />
$(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');
});
});
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.