Thomas Kalkowski: Bild mit der Maus mitwandern lassen

Beitrag lesen

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>