AbBa: Problem beim bewegen eines Bildes

Hab einen Code wegen clientX und clientY gefunden :D
Ein Layer bewegt sich zur Mausposition bei Mousedown.
Jetzt wollte ich ausprobieren, ob es auch so gehen würde,
dass sich das Bild in einer bestimmten Zeit dorthin bewegt.
So wie der Quelltext bei selfhtml ist, ist der Layer in 0.000 Sekunden da wo er ankomment sollte, und ich wollte halt, dass es dafür mehrere Sekungen braucht. Ich hab dann mal etwas "gebastelt":

<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
    var a = document.getElementById("Springer").style.left;
    var b = document.getElementById("Springer").style.top;
    var x = Ereignis.clientX + "px";
    var y = Ereignis.clientY + "px";
    if(a<x){
    alert("a++");
    a++;}
    if(a>x){
    alert("a--");
    a--;}
    if(b<y){
    alert("b++");
    b++;}
    if(b>y){
    alert("b--");
    b--;}
}

document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#000000; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
</body></html>

Normalerweiste müsste sich der Layer bewegen. Ich habe sogar alerts daszwischen eingebaut, um zu wissen, welche aktion gerade ausgeführt wird. Es kommt aber, egal wo ich auch mit der maus hinklicke, a++ und b++. Und dass dumme daran ist: es bewegt sich nicht ein Pixel weit. Es bleibt einfach so stehen...

  1. Ich sterbe gleich xD

    1. Ich sterbe gleich xD

      Herzliches Beileid.

      Alexander

      --
      Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
  2. Hi,

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Mausklick (Ereignis) {
      if (!Ereignis)
        Ereignis = window.event;
        var a = document.getElementById("Springer").style.left;
        var b = document.getElementById("Springer").style.top;
        var x = Ereignis.clientX + "px";
        var y = Ereignis.clientY + "px";
        if(a<x){
        alert("a++");
        a++;}
        if(a>x){
        alert("a--");
        a--;}
        if(b<y){
        alert("b++");
        b++;}
        if(b>y){
        alert("b--");
        b--;}
    }

    In dieser Funktion änderst du nirgends die Position des DIVs. Du liest sie nur in die Variablen a und b ein, setzt sie aber nirgends neu.

    Versuchs mal mit
    document.getElementById("Springer").style.left = a+'px';
    am Schluss der Funktion, dann sollte sich das DIV um ein Pixel verschieben.

    (Kann evtl. sein, dass bei a ein px dahinter steht, dieses muss dann wohl erst abgetrennt werden, damit du a mit a++ erhöhen kannst. Bin mir da nicht ganz sicher, aber das kannst du ja selbst ausprobieren)

    mfG,
    steckl