Frederik: DIV erst nach klicken folgen lassen?

Hallo, ich muss ein Script erstellen, was ein kleines rotes Kästchen der Maus folgen lässt. Der Haken an der sache ist nur, dass dieses Kästchen erst folgen soll, wenn ich einmal auf es geklickt habe und es nicht mehr folgen soll, wenn ich noch einmal darauf klicke...

Hier einmal den Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
  <head><title>roter_kasten</title><style type="text/css">  
   #schwarz	{width:500px; height:350px; background-color:black; position:static; top:50px; left:50px;}  
   #rot		{width:50px; height:50px; background-color:red; position:relative;top:0px; left:0px;}  
  
</style><script language=JavaScript type="text/javascript">  
function folgen (hoppel)  
{  
if (hoppel.pageX<=450 && hoppel.pageX>=0 && hoppel.pageY<=300 && hoppel.pageY>=0)  
    {  
    document.getElementById("rot").style.left = hoppel.pageX + "px";  
    document.getElementById("rot").style.top = hoppel.pageY + "px";  
    }  
  
}  
document.onmousemove = folgen;  
</script>  
</head>  
  <body>  
<div id="schwarz"><div id="rot"></div></div>  
 </body>  
</html>  

ich bin übrigens absoluter Neuling in sachen Java-Script, also nicht über komische Dinge wundern ;)

MfG, Freddy

  1. Hallo,

    gib doch dem Div eine Onclick-Funktion. Die setzt eine globale Variable "MyFolgen" auf true oder false.

    Die Funktion "folgen" fragt MyFolgen ab, bevor sie etwas tut.

    Gruß

    jobo

    1. »»Die setzt eine globale Variable "MyFolgen" auf true oder false.
      »»Die Funktion "folgen" fragt MyFolgen ab, bevor sie etwas tut.

      Könntest du das auch als Quelltext schreiben? ;)
      Mit true und false hab ich noch nie etwas gemacht, und ich weiß auch nicht genau, wie du die Abfrage meinst.

      1. Hallo,

        Könntest du das auch als Quelltext schreiben? ;)

        Eigentlich nicht, aber weil divs-ziehen-und-schieben eins meiner steckenpferde ist, hatte ich schon was probiert.

        Mit true und false hab ich noch nie etwas gemacht, und ich weiß auch nicht genau, wie du die Abfrage meinst.

        if(MyFolgen) {

        }

        Dein Problem ist, dass du das rote Div nicht mehr klicken kannst, wenn es dir folgt (;-).

          
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
        <html>  
          <head><title>roter_kasten</title><style type="text/css">  
           #schwarz        {width:500px; height:350px; background-color:black; position:static; top:50px; left:50px;}  
           #rot                {width:50px; height:50px; background-color:red; position:relative;top:0px; left:0px;}  
          
        </style><script language="JavaScript" type="text/javascript">  
        [code lang=javascript]  
        window.onload = function() {  
        	div = document.getElementById("rot");  
        	div.onclick = startFolgen;  
        }  
        startFolgen = function () {  
        	alert("losjetzt");  
        	document.onmousemove = folgen;  
        }  
        folgen = function (position){  
        if (position.pageX<=450  
        		&& position.pageX>=0  
        		&& position.pageY<=300  
        		&& position.pageY>=0) {  
            	div.style.left = position.pageX + "px";  
            	div.style.top = position.pageY + "px";  
            }  
        }  
        
        

        </script>
        </head>
          <body>
        <div id="schwarz"><div id="rot"></div></div>
         </body>
        </html>

        [/code]
        Gruß

        jobo

        1. Dein Problem ist, dass du das rote Div nicht mehr klicken kannst, wenn es dir folgt (;-).

          Ach mist, falsch ausgedrückt^^.
          Ich meinte für das Aufhören ein einfaches Klicken.
          Also 1 -> Klick Rotes Kästchen
               2 -> Kästchen Folgt
               3 -> Klick
               4 -> Kästchen bleibt stehen. :)

          1. Hallo,

            Dein Problem ist, dass du das rote Div nicht mehr klicken kannst, wenn es dir folgt (;-).

            Ach mist, falsch ausgedrückt^^.
            Ich meinte für das Aufhören ein einfaches Klicken.
            Also 1 -> Klick Rotes Kästchen
                 2 -> Kästchen Folgt
                 3 -> Klick
                 4 -> Kästchen bleibt stehen. :)

            Da musst du doch nur noch das onclick-Element auf "nichtFolgen" setzten. Oder auf "".

            Gruß

            jobo

            1. So! jetzt hab ichs ;)

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
              <html>  
                <head><title>roter_kasten</title><style type="text/css">  
                 #schwarz	{width:500px; height:350px; background-color:black; position:static; top:50px; left:50px;}  
                 #rot		{width:50px; height:50px; background-color:red; position:relative;top:0px; left:0px;}  
                
              </style><script language=JavaScript type="text/javascript">  
              var i=0;  
                
              function startFolgen ()  
              {  
              i = 1;  
              document.onmousemove = folgen;  
              }  
                
              function folgen (position)  
              {  
              if (position.pageX<=450 && position.pageX>=0 && position.pageY<=300 && position.pageY>=0 && i==1)  
                  {  
                  document.getElementById("rot").style.left = position.pageX + "px";  
                  document.getElementById("rot").style.top = position.pageY + "px";  
                  }  
              }  
              function endeFolgen ()  
              {  
              if(i>0)  
              i++;  
              alert("Danke, dass ich ihnen folgen durfte.");  
              }  
                
              </script>  
              </head>  
                <body>  
              <div id="schwarz" ondblclick="endeFolgen();"><div id="rot" onclick="startFolgen();"></div></div>  
               </body>  
              </html>
              

              Jetzt verstehe ich nur nicht, was genau denn der Parameter"posotion" macht?Hier ist das irgendwie nicht verständlich erklärt(für mich zumindest) (=

              1. Hallo,

                  
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
                <html>  
                  <head><title>roter_kasten</title><style type="text/css">  
                   #schwarz        {width:500px; height:350px; background-color:black; position:static; top:50px; left:50px;}  
                   #rot                {width:50px; height:50px; background-color:red; position:relative;top:0px; left:0px;}  
                  
                </style>  
                [code lang=javascript]  
                <script language="JavaScript" type="text/javascript">  
                window.onload = function() {  
                	divRot = document.getElementById("rot");  
                	divRot.onclick = startFolgen;  
                	ersterKlick = true;  
                	divSchwarz = document.getElementById("schwarz");  
                	divSchwarz.onclick = stopFolgen;  
                }  
                startFolgen = function () {  
                	alert("losjetzt");  
                	ersterKlick = true;  
                	document.onmousemove = folgen;  
                }  
                stopFolgen = function () {  
                	if (ersterKlick) {  
                		ersterKlick = false;  
                	} else {  
                		alert("vorbei");  
                		document.onmousemove = "";  
                	}	  
                }  
                folgen = function (myMouseEvent){  
                	xPos = myMouseEvent.pageX;  
                	yPos = myMouseEvent.pageY;  
                	inRange = ( (xPos <450)  && (yPos <300));  
                	if (inRange) {  
                    	divRot.style.left = xPos + "px";  
                    	divRot.style.top = yPos + "px";  
                    }  
                }  
                
                ~~~</script>  
                </head>  
                  <body>  
                <div id="schwarz"><div id="rot"></div></div>  
                 </body>  
                </html>  
                  
                "0 < x < irgendwas"  klappte irgendwie nicht.  
                  
                [/code]Gruß  
                  
                jobo