onmouseover -> bild verschieben

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • onmouseover -> bild verschieben

    hallo leute!

    habe mir gerade ein script aus ein paar codeschnipsel zusammengebastelt, was leider nicht funktioniert (aufgabenstellung: ein bild soll langsam nach rechts verschoben werden, solange man auf einem anderen bild mit der maus ist)..

    weiss zufällig jemand, wo der fehler ist oder habe ich einen denkfehler..?!


    danke im voraus..!


    lg, harry d.


    Code:
    <html>
    <head>
    
    	<script type="text/javascript">
    
    		function startTime(time)
            {
    			var pos = document.getElementById("box1").style.left;
    			
           		window.setTimeout(movePix(pos),time);
    		}
    		
    		function movePix(pos)
            {
           		document.getElementById("box1").style.left = pos++;
    			
    			document.getElementById('text_feld').innerHTML=pos++;
    		}
    		
    	</script>
    
    </head>
    
    <body>
    
    	<div id="box1" style=" position:absolute; top:10px; left:10px; width:50px; height:50px; z-index:1;">
    	<img src="" 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);"
    	</div>
    	
    	<div id="text_feld" style="position:relative;">&nbsp;</div>
    	
    </body>
    </html>

  • #2
    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.

    Kommentar


    • #3
      Original geschrieben von icon
      weiss jemand, wie ich mit js die zahl am besten rausfiltern kann..?!
      parseInt()
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar


      • #4
        PHP-Code:
        var pos parseInt(document.getElementById("box1").style.left); 
        gruss
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          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)

          Kommentar


          • #6
            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.
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar


            • #7
              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>

              Kommentar


              • #8
                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();">

                Kommentar


                • #9
                  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.
                  I don't believe in rebirth. Actually, I never did in my whole lives.

                  Kommentar


                  • #10
                    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>

                    Kommentar

                    Lädt...
                    X