Poldi: Bild mit der Maus mitwandern lassen

Hallo!

Irgendwo habe ich gelesen, dass es moeglich ist, mittels Javascript ein Bild mit dem Mauszeiger
mitwandern zu lassen.

Wuerde mich freuen, wenn mir jemand verraten koennte, wie man das macht!

Danke.

Poldi.

  1. Hallo Poldi,

    als Stichwort LAYER und Eventhandling. Den Rest kannste Dir mit SelfHTML zusammenbasteln. Ein fertiges Script kann ich leider nicht bieten. Hab auch keine Lust danach zu suchen oder mich selbst mit diesem Problem abzugeben.
    Ein anderer hat ja vielleicht was zur Hand.

    Gruß
       Michael

  2. Hallo!

    Ab 1.Januar 2000 kannst du dafür z.B. den Script von Atnje Hoffmann verwenden.
    http://www.atomic-eggs.com/selfspezial/6/cbopq2.shtml

    Grüße
    Thomas

    PS: ich weiss, es ist noch fast ein Monat bis dahin.

    1. Ab 1.Januar 2000 kannst du dafür z.B. den Script von Atnje Hoffmann verwenden.

      Hi,

      damit man nicht so lange warten muß nachfolgend eine kleine Lösung für den IE.

      Ins Bild klicken - Mouse bewegen - mit DblClick ablegen:

      <html>
      <head>
      <title>Untitled</title>
        
      <script>
      <!--
         var isit=false;
        
         function MoveIt()
         {
            if (isit==true)
            {
            document.all.foto.style.left = window.event.clientX;  
            document.all.foto.style.top = window.event.clientY;
            }
         }
        
        function InitMoveIt()
        {
            if (isit==true)
            {isit=false}
            else
            {isit=true}
         }
        
         function StopMoveIt()
         {
            isit=false;
         }  
      //-->
      </script>
      </head>

      <body>
      <div id="foto" style="position:absolute; left:20; top:20" onclick="InitMoveIt()" ondblclick="StopMoveIt()" >
      <img src="T1972.jpg" width="85" height="109" border="0" alt="">
      </div>
      <script>
      <!--
         document.onmousemove=MoveIt;
         document.ondblclick=StopMoveIt;
        
      //-->
      </script>
      </body>
      </html>

      Sozusagen mein Nikolausgeschenk.

      So long
      Thomas

  3. So Poldi,
    nachfolgend ein Programm, welches ein IMG unter Navi bewegt. Dabei ist folgendes zu beachten:

    Der Layer-Bereich muß (!!!) größer als das eigentliche IMG sein, da nur ein Click in den "zu großen" Bereich also außerhalb des IMG aber innerhalb des Layers wirkt. Deshalb wird beim Bewegen der Mouse-Cursor immer in diesem Bereich gehalten. Anders geht es beim Navi nicht.

    Ansonsten 1. Click startet die Bewegung
                      2. Click (im def. Bereich) beendet das Bewegen

    Desweiteren ist zu beachten, daß die Mouse langsam bewegt wird - ansonsten , wenn der Mousecursor den sensitiven Bereich verläßt , bleibt das IMG stehen - ist aber noch sensitiv, d.h. wenn der Mousecurosr wieder in den Bereich kommt, bewegt sich das IMG wieder bis "geclickt" wird.

    Ansonsten kann ich nur auf folgende Seite von SELFHtml verweisen - daher habe ich auch das Beispiel (leicht abgespeckt).

    <../../tfcb.htm>

    Gruß Thomas

    <html>
    <head>
    <title>Untitled</title>
      
    </head>
    <body>
    <div id="div1" style="position:absolute; top:130px; left:100px">
    <layer id="foto" width=105 height=129 bgcolor=#DDDDFF>
    <img src="T1972.jpg" width="85" height="109" border="0" alt="">
    </layer>
    </div>
    <script language="JavaScript">
    <!--
       Initfoto();
       function Initfoto()
       {  document.layers[0].captureEvents(Event.CLICK);  document.layers[0].onclick=Startfoto;
          document.layers[0].onload=fotoReset;  }
      
       function Startfoto()
       {  document.layers[0].captureEvents(Event.MOUSEMOVEEvent.CLICK);
          document.layers[0].onmousemove=Ziehfoto;   document.layers[0].onclick=Endfoto;  }
      
       function Endfoto()
       {  document.layers[0].onMousemove=0;  document.layers[0].releaseEvents(Event.MOUSEMOVE); Initfoto(); }
      
       function fotoReset()
       { document.layers[0].captureEvents(Event.CLICKEvent.MOUSEMOVE);  }
      
       function Ziehfoto(Ereignis)
       {  document.layers[0].left = Ereignis.pageX-95 ;  document.layers[0].top = Ereignis.pageY-115;  }
    //-->
    </script>
    </body>
    </html>