mootools und mouseleave funktioniert im IE8 nicht richtig

[chapolote]

Hallo,

ich bin eigentlich JS-Newbie und somit auch mootools-Newbie.
Ich habe mich angefangen mit der Materie zu beschäftigen, weil ich für eine Webseite, die im Aufbau ist, eine Funktionalität realisieren soll, die IMHO nur mit js zu realisieren ist.

Aufgabe ist, beim Überfahren eines Links das Aussehen mehrer anderer Elemente (Rahmen um die Website) verändert werden soll.
Das funktioniert auch in allen gängigen aktuellen Browsern (FF, Chrom, Safari, Opera) wie gewünscht (bin ganz stolz auf mich ), nur im Internet-Explorer nicht so ganz.

Bei mouseenter werden in 6 divs die Hintergrundgrafik ausgetauscht und in 4 divs die Position der Hintergrundgrafik verschoben. Bei mouseleave soll alles wieder rückgängig gemacht werden, und da zickt der IE bei der Positionierung der Hintergrundgrafik in den 4 divs, das ersetzen der anderen Grafiken tut er schon. Außerdem flackert beim mouseenter immer ein Hintergrundbild durch, was in den anderen Browsern auch nicht so ist.

Zu sehen hier: http://www.palani.joelipps.de/index.php?id=23 (es geht um die Links oben rechts im grauen Balken).

Kann mir jemand weiterhelfen, wo der IE-Fehler versteckt ist?

Hier noch mein Script, wobei es ganz bestimmt nicht das eleganteste ist, was man schreiben könnte, aber für den Anfang tut's ja anscheinend - wenn auch nicht so ganz (für Anregungen zur Verbesserung im allgemeinen freu ich mich natürlich auch )

window.addEvent('domready', function(){

var gfx_lo = $('edge-lo');
var gfx_ro = $('edge-ro');
var gfx_lu = $('edge-lu');
var gfx_ru = $('edge-ru');
var gfx_bt = $('border-top');
var gfx_bb = $('border-bottom-gfx');

var gfx_sl = $('page_margins');
var gfx_slr = $('page_margins_gfx');
var gfx_sr = $('page');
var gfx_srr = $('page_gfx');

var divArr = new Array(gfx_lo,gfx_ro,gfx_lu,gfx_ru,gfx_bt,gfx_bb);
var divArrAdd = new Array(gfx_sl,gfx_sr,gfx_slr,gfx_srr);

var pathArr = new Array();
pathArr[0] = '/fileadmin/images/gfx/gfx_corners_hor_r.jpg';
pathArr[1] = '/fileadmin/images/gfx/gfx_corners_hor_m.jpg';
pathArr[2] = '/fileadmin/images/gfx/gfx_corners_hor_y.jpg';
pathArr[3] = '/fileadmin/images/gfx/gfx_corners_hor_g.jpg';
pathArr[4] = '/fileadmin/images/gfx/gfx_corners_hor_w.jpg';

var posArr = new Array();

posArr[0] = new Array('-360px 0px','495px 0px','-450px 59px','405px 19px');
posArr[1] = new Array('0px 0px','855px 0px','-90px 59px','765px 19px');
posArr[2] = new Array('-540px 0px','315px 0px','-630px 59px','225px 19px');
posArr[3] = new Array('-180px 0px','675px 0px','-270px 59px','585px 19px');
posArr[4] = new Array('-720px 0px','135px 0px','-810px 59px','45px 19px');


var firstImg = new Array(divArr.length);
for (var i = 0; i < divArr.length; i++){
   firstImg[i] = divArr[i].getStyles('background-image');
}

var firstPos = new Array(divArrAdd.length);
for (var i = 0; i < divArrAdd.length; i++){
   firstPos[i] = divArrAdd[i].getStyles('background-position');

}

onThumbnailDataLoaded:function changeImg(path,pos){


   for (var i = 0; i < divArr.length; i++){
       divArr[i].setStyle('background-image','url("'+path+'")');
   }
   for (var i = 0; i < divArrAdd.length; i++){
       divArrAdd[i].setStyle('background-position',pos[i]);
   }

}

onThumbnailDataLoaded:function changeBack(){

    for (var i = 0; i < divArr.length; i++){
         divArr[i].setStyle('background-image',firstImg[i]['background-image']);
    }
    for (var i = 0; i < divArrAdd.length; i++){
         var thisPos = firstPos[i]['background-position'];
         divArrAdd[i].setStyle('background-position',thisPos);
    }
}


$('menu_1').addEvent('mouseenter', function(){changeImg(pathArr[0],posArr[0])});
$('menu_2').addEvent('mouseenter', function(){changeImg(pathArr[1],posArr[1])});
$('menu_3').addEvent('mouseenter', function(){changeImg(pathArr[2],posArr[2])});
$('menu_4').addEvent('mouseenter', function(){changeImg(pathArr[3],posArr[3])});
$('menu_5').addEvent('mouseenter', function(){changeImg(pathArr[4],posArr[4])});
$('menu_1').addEvent('mouseleave', function(){changeBack()});
$('menu_2').addEvent('mouseleave', function(){changeBack()});
$('menu_3').addEvent('mouseleave', function(){changeBack()});
$('menu_4').addEvent('mouseleave', function(){changeBack()});
$('menu_5').addEvent('mouseleave', function(){changeBack()});
});

});

Danke und Gruß,
chapolote

 

[taurious]

Zu sehen hier (es geht um die Links oben rechts im grauen Balken).

Wo?


Der von dir eingegebene Text ist zu kurz. Bitte erweitere den Text auf die minimale Länge von 10 Zeichen.

 

[chapolote]

Habs editiert