[jquery] zmiana roznych obrazkow

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.

podstawy jQuery, pierwsze kursy, potem forum

<div id="menu">
  <img src="/1.png" data-src-over="/_1.png" data-src-out="/1.png" alt="" />
  <img src="/2.png" data-src-over="/_2.png" data-src-out="/2.png" alt="" />
</div>

$('#menu img').hover(function(){
  $(this).attr('src', $(this).attr('data-src-over'));
}, function(){
  $(this).attr('src', $(this).attr('data-src-out'));
});

mozna to zrobic lepiej, ale nie mam czasu, poczytaj kursy, manual, cokolwiek

Równie dobrze moge to zrobic w javascript onmouseover -out, jednak chodzi o to zeby img mialy wspolna np klase aby kod jquery byl oddzielony od html taki sposob mnie nie ratuje

na podstawie kodu dzek69, bez potrzeby użycia dodatkowych atrybutów (acz przyznam, że moim zdaniem to gorsze rozwiązanie):

$('#menu img').hover(
  function() { $(this).attr('src', $(this).attr('href').replace('_', '')); },// pójście na łatwiznę przy założeniu, że w ścieżce nie ma żadnego innego znaku _
  function() { $(this).attr('src', $(this).attr('href').replace(/([^\\/]+)$/, '_$1')); } // nie testowałem - pomęcz się trochę sam
);

nie chciało mi się wtedy pisać (czemu miałoby mi się chcieć komuś, kto nie przeczytał ani jednego tekstu nt. jQuery zanim wpadł na forum z pytaniem?), ale chciałem zaproponować także wersję bez dodatkowych atrybutów (to co podał @ŁF), ew. wersję, w której atrybut ekstra jest tylko jeden (a data-src-out generuje się na DOM ready), a w wersji bez atrybutów zasugerować zmiany nazw plików na jakieś do łatwiejszego replace niż regexpy (typu: /1_hover.png /1_out.png) - a ogólnie to poradzić poczytać o CSS sprite'ach - do czego Cię gorąco zachęcam @jawka7
i w sumie fajnie, ze ktoś Ci kiedyś napisał, że onmouseover jest brzydkie, ale niewiele z tego zrozumiałeś :)

koledzy Cię chyba nie lubią bo proponują jakieś dziwne rozwiązania zamiast zaproponowania żebyś w ogóle zrezygnował z jQuery, wyrzucił to w piździet i podmianę obrazków zrobił na czystym CSS:
tu masz instrukcje: http://websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css

Twoje rozwiązanie po pierwsze wymaga obsługi Javascriptu, a po drugie podmieniane obrazki wczytają się dopiero po najechaniu przez co tworzy to niezbyt estetyczny efekt migania i zwiększa ilość zapytań do serwera, a także ilość danych potrzebnych do ściągnięcia (kilka małych obrazków zajmuje więcej niż jeden większy). Można to rozwiązać robiąc preloader obrazków w javascript, ale to jeszcze więcej zbędnego kodu javascript żeby osiągnąć to samo w gorszy sposób.

Wpisz w google "sprite generator" żeby znaleźć jakiś generator online do połączenia obrazków