onmouseover -> bild verschieben

**icon** · 26.04.2004, 14:15

hmm.. habe gerade bemerkt, dass der wert von left nicht nur eine zahl sondern eine zahl + chars ist (zb.: 10px)

weiss jemand, wie ich mit js die zahl am besten rausfiltern kann..?!

lg, harry d.

**wahsaga** · 26.04.2004, 14:19

Original geschrieben von icon
weiss jemand, wie ich mit js die zahl am besten rausfiltern kann..?!

parseInt()

**Kropff** · 26.04.2004, 14:20

PHP-Code:


var pos = parseInt(document.getElementById("box1").style.left);

gruss
peter

**icon** · 26.04.2004, 14:22

LANG LEBE JAVASCRIPTGOTT WAHSAGA..

und noch eine kleine frage: wieso wandert das bild jetzt nicht automatisch sondern nur wenn ich wegfahre und dann wieder darüber..?!

thx..!- lg, harry d.

EDIT:
natürlich auch ein thx an kropff.. (habe ich zu spät gesehen)

**wahsaga** · 26.04.2004, 14:50

Original geschrieben von icon
wieso wandert das bild jetzt nicht automatisch sondern nur wenn ich wegfahre und dann wieder darüber..?!

weil du mit setTimeout die funktion zum bewegen des bildes nur ein mal aufrufst!

bild verlassen, erneut überfahren -> onMouseover tritt erneut ein, funktion movePix() wird wieder ein mal mal zeitverzögert aufgerufen, etc.

schau dir mal setInterval() an.

**icon** · 26.04.2004, 15:08

danke für deine hilfe und deine super erklärungen..

das script läuft jetzt so, wie ich es vorerst einmal wollte..

vielen vielen dank noch einmal!!!

und falls es vielleicht doch einmal irgendwer sucht:

Code:

<html>
<head>

	<script type="text/javascript">

		function startTime(time)
        {
       		activ = window.setInterval('movePic()',time);
		}
		
		function stopTime()
        {
       		window.clearInterval(activ);
		}
		
		function movePic()
        {
			var a = parseInt(document.getElementById("box1").style.left);
			
			document.getElementById('text_feld').innerHTML = a;
		
       		document.getElementById('box1').style.left = a + 1;
		}
		
	</script>

</head>

<body>

	<div id="box1" style=" position:absolute; top:10px; left:10px; width:50px; height:50px; z-index:1;">
	<img src="blubleh.jpg" width="50" height="50" border="0" alt="">
	</div>
	
	<div id="box1" style=" position:absolute; top:150px; left:10px; width:50px; height:50px; z-index:1;">
	<img src="blahblah.jpg"
    onMouseover="javascript:startTime(100);"
	onMouseout="javascript:stopTime();">
	</div>
	
	<div id="text_feld" style="position:absolute; top:300px; left:10px;;">&nbsp;</div>
	
</body>
</html>

**icon** · 26.04.2004, 16:21

hallo noch einmal!

habe das script jetzt so umgebaut, dass es nicht mehr auf onmouseover() sonder mittels onmousedown auf tastendruck reagiert..

das funktioniert auch super, aber wenn ich jetzt die linke maustaste drücke und das element nach recht wandert und ich während dessen auch die rechte maustaste drücke, so lässt es sich nicht mehr stoppen und ein erneutes drücken der linken mt beschleunigt es nur noch..
kann man das irgendwie ausschalten (das man mit rechtsklick die kontrolle verliert..?!)

lg, harry d.

Code:

<img src="test.jpg"
 onMousedown="javascript:startTime(20);"
 onMouseup="javascript:stopTime();">

**wahsaga** · 26.04.2004, 16:34

Original geschrieben von icon
wenn ich jetzt die linke maustaste drücke und das element nach recht wandert und ich während dessen auch die rechte maustaste drücke, so lässt es sich nicht mehr stoppen und ein erneutes drücken der linken mt beschleunigt es nur noch..

ich würde mal vermuten, dass du damit ein neues interval startest - die funktion wird erneut aufgerufen, denn onMousedown feuert ja erneut, und dein zeiger auf das schon bestehende interval (activ) wird überschrieben.

du hast jetzt also zwei intervalle laufen, die beide die bewegungsfunktion aufrufen - und onMouseup kannst du nur eins davon wieder stoppen, weil du auf das andere ja gar keine referenz mehr hast.

du könntest versuchen, beim aufruf der start-funktion zunächst zu überprüfen, ob bereits ein interval existiert.

**icon** · 26.04.2004, 16:41

danke wahsaga..!

so funktioniert es jetzt:

Code:

<script type="text/javascript">

		var run = 0
	
		function startTime(time)
        {
       		if (run == 0)
			{
				activ = window.setInterval('movePic()',time);
				
				run = 1;
			}
		}
		
		function stopTime()
        {
			if (run == 1)
			{
       			window.clearInterval(activ);
				
				run = 0;
			}
		}
		
		function movePic()
        {
			var a = parseInt(document.getElementById("box1").style.left);
			
			document.getElementById('text_feld').innerHTML = a;
		
       		document.getElementById('box1').style.left = a + 1;
		}
		
	</script>

onmouseover -> bild verschieben