Javascript IE-tauglich machen und überarbeiten

[Delfried]

Guten Tag,
ich steht schon seit längerem vor einem Problem.
Ich hatte schon vor geraumer Zeit, als das JS noch lange nicht so
ausgereift, wie es jetzt ist, war. Jedoch ist dieser Beitrag längst in den
Tiefen des Forums verschwunden.
Danke schon mal all denen die es bis zum Ende des Postings schaffen.
Ich habe ein JS programmiert, welches, grob beschrieben, ein Bild vergrößert.

Um es zu präzisieren:

*klick* aufs Bild:

1. Kleines Bild wird durch ein größeres ausgetauscht und während dieser
   Zeit steht "Bild wird geladen" da.
2. Bild wird vergrößert.
3. Beschreibung erscheint.

Weiterer *klick* aufs Bild:

1. Beschreibung entfernt sich.
2. Bild verkleinert sich.

Nun kommt es leider zu Komplikationen:

1. Bei öfterem klicken aufs Bild kann es passieren, dass die Größe und die
   Position des Bildes plötzlich verändern. Dies passiert wenn man genau
   nach dem verkleinern des Bildes aufs Bild klickt. Jedoch nicht immer.
   Zudem ist mir dieser Fehler noch nicht aufgefallen, als ich das JS auf
   nur ein Test Bild angewendet habe.
2. Für den I-Explorer funktioniert das Script nicht. (Bei FF und Opera gibt
   es keine Probleme, mit Netscape konnte ich es nicht teste, da ich es
   nicht habe.)

Hier ist der Javascript Teil:

  
<script type="text/javascript">  
  
var z = "1";  
  
function zoom(nr, distop, disleft, mywidth, myheight, a, used) {  
  
 var e = document.getElementById("pic" + nr);  
  
 e.onclick = function () {};  
  
 var l = document.getElementById("pic" + nr + "-" + "2");  
 var m = document.getElementById("pic" + nr + "-" + "3");  
 var n = document.getElementById("pic" + nr + "-" + "4");  
 var t = document.getElementById("black");  
  
 if (used == 0) {  
  t.style.visibility = "visible";  
  l.onload = function () {change(t, nr, distop, disleft, mywidth, myheight, a, used);};  
  l.src = "newbackground.jpg";  
 }  
 else {  
  
  var topdiv = e.offsetTop;  
  var leftdiv = e.offsetLeft;  
  
  var widthpic = l.offsetWidth;  
  var heightpic = l.offsetHeight;  
  
  var heightcomment = n.offsetHeight;  
  
  var heightoverflow = m.offsetHeight;  
  
  e.style.zIndex = z;  
  
  if (widthpic < 400) {  
  
   a++;  
  
   var ver = mywidth / myheight;  
  
   l.style.width = mywidth + a * 8 * ver + 'px';  
  
   l.style.height = myheight + a * 8 + 'px';  
  
   e.style.top = distop - a * 4 + 'px';  
   e.style.left = disleft - a * 4 * ver + 'px';  
  
   window.setTimeout(function () {zoom(nr, distop, disleft, mywidth, myheight, a, used);}, 1);  
  
  }  
  
  if (widthpic >= 400 && heightoverflow < heightcomment) {  
  
   m.style.width = widthpic;  
  
   heightoverflow += 2;  
   m.style.height = heightoverflow + 'px';  
  
   if (heightcomment <= heightoverflow) {  
  
    m.style.height = "auto";  
  
    z++;  
  
    e.onclick = function () {zoomout(nr, distop, disleft, mywidth, myheight, a);};  
  
   }  
   else {  
  
   window.setTimeout(function () {zoom(nr, distop, disleft, mywidth, myheight, a, used);}, 1);  
  
   }  
  
  }  
  
 }  
  
}  
  
</script>  
<script type="text/javascript">  
  
function zoomout(nr, distop, disleft, mywidth, myheight, a) {  
  
 var e = document.getElementById("pic" + nr);  
  
 e.onclick = function () {};  
  
 var l = document.getElementById("pic" + nr + "-" + "2");  
 var m = document.getElementById("pic" + nr + "-" + "3");  
  
 var topdiv = e.offsetTop;  
  
 var leftdiv = e.offsetLeft;  
  
 var widthpic = l.offsetWidth;  
 var heightpic = l.offsetHeight;  
  
 var heightoverflow = m.offsetHeight;  
  
 if (heightoverflow > 0) {  
  
  heightoverflow -= 2;  
  m.style.height = heightoverflow + 'px';  
  
  window.setTimeout(function () {zoomout(nr, distop, disleft, mywidth, myheight, a);}, 1);  
  
 }  
  
 if (heightoverflow <= 0 && widthpic > mywidth) {  
  
  m.style.width = mywidth;  
  
  a--;  
  
  var ver = mywidth / myheight;  
  
  l.style.width = mywidth + a * 8 * ver + 'px';  
  l.style.height = myheight + a * 8 + 'px';  
  
  e.style.top = distop - a * 4 + 'px';  
  e.style.left = disleft - a * 4 * ver + 'px';  
  
 }  
  
 if (widthpic == mywidth) {  
  
  e.style.zIndex = "0";  
  
  e.onclick = function () {zoom(nr, this.offsetTop, this.offsetLeft, document.getElementById("pic" + nr + "-2").offsetWidth,  document.getElementById("pic" + nr + "-2").offsetHeight, a);};  
  
 }  
 else {  
  
  window.setTimeout(function () {zoomout(nr, distop, disleft, mywidth, myheight, a);}, 1);  
  
 }  
  
}  
  
</script>  
<script type="text/javascript">  
  
function change(t, nr, distop, disleft, mywidth, myheight, a, used) {  
 t.style.visibility = "hidden";  
 used = 1;  
 zoom(nr, distop, disleft, mywidth, myheight, a, used);  
}  
  
</script>  

Die komplette Test-Datei gibt es http://mariushofmann.ma.funpic.de/test/zoom3.html@title:hier.

Danke für alle die es sich bis hier her angeschaut haben, und noch mehr Dank denen die noch Fehler aufdecken können und somit beihelfen das JS zu optimieren.

Mfg Delfried