Общее решение, которое не ограничивает вас только «этим изображением» и «тем изображением», может заключаться в добавлении тегов «onmouseover» и «onmouseout» в сам код HTML.
HTML
<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />
JavaScript
function swap(newImg){
this.src = newImg;
}
В зависимости от вашей настройки, возможно, что-то подобное будет работать лучше (и требует меньше изменений HTML).
HTML
<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />
JavaScript / JQuery
// Declare Arrays
imgList = new Array();
imgList["ref1"] = new Array();
imgList["ref2"] = new Array();
imgList["ref3"] = new Array();
//Set values for each mouse state
imgList["ref1"]["out"] = "img1.jpg";
imgList["ref1"]["over"] = "img2.jpg";
imgList["ref2"]["out"] = "img3.jpg";
imgList["ref2"]["over"] = "img4.jpg";
imgList["ref3"]["out"] = "img5.jpg";
imgList["ref3"]["over"] = "img6.jpg";
//Add the swapping functions
$("img").mouseover(function(){
$(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
}
$("img").mouseout(function(){
$(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
}