Podmiana zdjęć onmouseover

Witam wszystkich,

Napisałem sobie taki prosty skrypt:

function changeImage(){

	$( "#earth" ).attr("src", "img/earth1.jpg");
	$( "#air" ).attr("src", "img/air1.jpg");

	$( "#this" ).mouseout(function(){

		$( "#earth" ).attr("src", "img/earth.jpg");
		$( "#air" ).attr("src", "img/air.jpg");
	});
};
 

Skrypt działa ale potrzebuje aby był optymalny.

Opis sytuacji: Na stronie są trzy obrazki o id("earth", "water", "air"). Po najechaniu myszką na obrazek o id="water" dwa pozostałe obrazki zmieniają się. Jak napisać ten skrypt aby działał niezależnie od tego, na który obrazek się najedzie.

W skrócie - potrzebuje skryptu, który sprawi że po najechaniu na jeden, dwa pozostałe zmienią się na inne.

    $( "#earth").mouseout(function(){
        $(this).attr("src", "img/earth.jpg");
    });
    $( "#air" ).mouseout(function(){
        $(this).attr("src", "img/air.jpg");
    });

 var $earth = $("#earth");
    var $air = $("#air");
    var $water = $("#water");
    var $elements = $('.elements');

    var changeElementsImgOnEnter = function(elementType) {
        switch (elementType) {
            case 'earth':
                $water.attr("src", "img/water2.jpg");
                $air.attr("src", "img/air2.jpg");
                break;
            case 'air':
                $earth.attr("src", "img/earth2.jpg");
                $water.attr("src", "img/water2.jpg");
                break;
            case 'water':
                $earth.attr("src", "img/earth2.jpg");
                $air.attr("src", "img/air2.jpg");
                break;
        }
    }

    var changeElementsImgOnLeave = function(elementType) {
         switch (elementType) {
            case 'earth':
                $water.attr("src", "img/water1.jpg");
                $air.attr("src", "img/air1.jpg");
                break;
            case 'air':
                $earth.attr("src", "img/earth1.jpg");
                $water.attr("src", "img/water1.jpg");
                break;
            case 'water':
                $earth.attr("src", "img/earth1.jpg");
                $air.attr("src", "img/air1.jpg");
                break;
        }
    }

    $elements.mouseenter(function() {
        var elementType = $(this).attr('element-type');
        changeElementsImgOnEnter(elementType);
    }).mouseleave(function() {
        var elementType = $(this).attr('element-type');
        changeElementsImgOnLeave(elementType);
    });

To tylko luzna koncepcja, nie testowana przeze mnie. Ale wspomne tylko ze:

1. Elementy img w tym wypadku musza miec klase 'elements',
2. Elementy img w tym wypadku musza miec ustawiony atrybut 'element-type' np.

srry zla odpowiedz prosze usunac moje posty xd

Który atrybut powinienem ustawić na element-type??

img src="..." element-type="air"
img src="..." element-type="earth"
img src="..." element-type="water"