Bild mit der Maus mitwandern lassen
Poldi
- javascript
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.
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
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.
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
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>