Sebastian Meisinger: <div> bewegt sich nicht so, wie ich will...

Beitrag lesen

Hallo Leute,

schon mehr als eine Woche sitze ich bei meinem Problem und komme auf keine Loesung. Vielleicht sehe ich den Wald vor lauter Baeumen nicht.

Ich habe fünf <div>-Bereiche auf meiner Hauptseite, die ich mit z.B. "onMouseover="init('BSInfoblatt','0')" unabhaengig voneinander um 145 Pixel in 5er Schritten nach oben bewege ('BSInfoblatt' ist die ID eines der <div>-Bereiche und mit der Zahl [0-4] übergebe ich die Kennziffer für das aktuelle Array). Funktioniert beim IE (4-6) auch, aber wenn ich genau hinsehe, dann bewegt er sich fast unmerklich zuerst 5 Pixel nach unten und dann erst 150 Pixel hinauf. Entgegengesetzt synchron bei "mouseOut" - da geht der Layer erst 5 Pixel hinauf und dann den ganzen Weg hinunter.

Beim NN6 sieht man den Effekt noch deutlicher, weil da alles viel, viel langsamer geht und der NN4 springt nur in unregelmaessigen Abständen in die gewuenschte Richtung - wenn überhaupt.

Mache ich da einen grundsätzlichen Fehler, habe ich da ein Logikproblem oder versuche ich das Unmoegliche viel zu kompliziert zu erzwingen?

Bitte moegliche Formfehler zu verzeihen - es ist meine erste Seite...

Hier der Code:

<Script Language="JavaScript" type="text/javascript">
<!--
var ns4 = document.layers?1:0;
var dom = document.getElementById?1:0;
var timer = new Array(null,null,null,null,null);
var width = 145;
var speed = 1;
var begin = 250;

// Array-Variable für die verschiedenen top-Werte der Layer

var x = new Array(250,250,250,250,250);
ns4?ref="document.":ref="document.getElementById";

// Funktion schiebt den übergebenen Layer so lange hoch, bis 105 Pixel zurückgelegt sind und übernimmt die dazugehörige ID der <div>-Bereiche und die Nummerierung für das x- bzw. das time-Array.

function init(layer,xarr) {
  clearInterval(timer[xarr]);
  timer[xarr] = setInterval("scroll('" + layer + "','" + xarr + "')",speed);
}

function scroll(layer,xarr) {
 if(x[xarr] > (begin - width)) {
  if (ns4) {
  eval(ref + layer + '.top="' + x[xarr] + '"');
  }
  else if (dom) {
  eval(ref + '("' + layer + '")' + '.style.top="' + x[xarr] + '"');
  }
  x[xarr] = x[xarr] - 5;
 }
}

// Funktion schiebt den übergebenen Layer runter und übernimmt die dazugehörigen Arrays

function initdown(layer,xarr) {
  clearInterval(timer[xarr]);
  timer[xarr] = setInterval("scrolldown('" + layer + "','" + xarr + "')",speed);
}

function scrolldown(layer,xarr) {
 if(x[xarr] <= begin) {
  if (ns4) {
  eval(ref + layer + '.top="' + x[xarr] + '"');
  }
  else if (dom) {
  eval(ref + '("' + layer + '")' + '.style.top="' + x[xarr] + '"');
  }
  x[xarr] = x[xarr] + 5;
 }
}

-->
</script>

---------------------------------------------------------------------
Dies hier ist der <div>-Layer im HTML-Code, in dem ich mit mouseOver und mouseOut die Bewegung iniziere, und die IDs der fünf Layer + der Kennziffern für die timer- und die x-Arrays weitergebe...

<div ID="HSInfoblatt" style="position: absolute; left:10px; top:250px; z-index:1;" onMouseover="init('HSInfoblatt','0')" onMouseout="initdown('HSInfoblatt','0')">
  <img src="GIFs/NEWS1.gif" width=110 height=10 border="0"><table bgcolor=#0055ff width="110" style="filter:Alpha(opacity=80,finishopacity=80,style=0);">
    <tr>
      <td>
   <div class="Textkleinweiss" align=center>HOCHSEE - INFOS</div>
      </td>
    </tr>
    <tr>
      <td>
        <h1 align=center><br>Am 1. Juni 02<br>beginnt der<br>nächste Törn !<br>Melden Sie sich hier an!<br><br><br>
        <a href="Anmeldung/AnmeldungFrameset.html">ANMELDUNG</a>
        <br><br>
               </h1>
      </td>
    </tr>
 </table>
 </div>

Wäre einmalig, wenn sich jemand die Muehe antut, sich den Code anzuschauen. Ich verstehe wahrscheinlich die setInterval-Funktion falsch, oder entgleisen mir hier irgendwo die Variablen?

Danke!