kostenloser Webspace werbefrei: lima-city

bewegung starten und stoppen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   programtools

   programtools hat kostenlosen Webspace.

   11:05, 21.3.2010

   Hi ich habe folgendes Script, was ein Bild beim überfahren "blinken lässt" (also größer und wieder kleiner werden lässt):
   

   <script language="Javascript">
   					// onmouseover="pop(id)" onmouseout="???"
   var ovsm; ovsm = 0; 			// ObjectValueScoreMax (max) * ++ 1px
   var ovsn; ovsn = 0; 				// ObjectValueScoremiN (min) * --1px [~ (max)]
   function pop(objn){  			// objn as Object_ID (OBJectNumber) 
      var obj = document.getElementById(objn); 	// obj as Object (public;intern)
      var objh = obj.offsetHeight;
      var objw = obj.offsetWidth;
      if (ovsm < 5){
          obj.style.height = objh - 1 + 'px';
          obj.style.width = objw - 1 + 'px';
          ++ovsm; 
          window.setTimeout(function(){pop(objn);}, 50);
      }
      else{
         if (ovsn < 5){
            obj.style.height = objh + 1 + 'px';
            obj.style.width = objw + 1 + 'px';
            ++ovsn; 
            window.setTimeout(function(){pop(objn);}, 50);
         }
         else{
            ovsm = 0; ovsn = 0; window.setTimeout(function(){pop(objn);}, 300);
         }
      }
   }
   </script>

   
   
   Das Aufrufen mache ich über onmouseover="pop('id');" onmouseout="???"
   
   Mein Problem ist es, das es aufhören soll also in der letzten else schleife prüfen soll ob man mit der Maus raus ist und dann aufhören soll. Zusätzlich soll die Function noch für mehrere Bildobjecte funktionieren (ich habe bisher 3). Doch da eine Function in JS ja mehrmals laufen kann, habe ich keine Ahnung wie ich das machen soll. Ich hoffe ihr könnt mir helfen!!
   
   MVG
   
   Beitrag zuletzt geändert: 21.3.2010 11:05:33 von programtools

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. qap2

   

   qap2 hat kostenlosen Webspace.

   18:01, 21.3.2010

   Hi,
   ich hab' mal versucht das ungefähr so umzusetzen wie du es beschrieben hast:
   

   <script language="Javascript" type="text/javascript">
   <!--
   var maximumStat = new Array(50,100,50),
       currentStat = new Array(0,0,0),
       currentDirection = new Array();
   
   function initZoom(elId,dir,id) {
     currentDirection[id] = dir;
     zoom(elId,id);
   }
   
   function zoom(elId,id) {
     var el = document.getElementById(elId);
   
     if(currentDirection[id] == "+" && (currentStat[id] < maximumStat[id])) {
       el.style.width  = parseInt(el.style.width)+1;
       el.style.height = parseInt(el.style.height)+1;
       currentStat[id]++;
       setTimeout("zoom('"+elId+"','"+id+"')",20);
   
     } else if(currentDirection[id] == "-" && (currentStat[id] >= 0)) {
       el.style.width  = parseInt(el.style.width)-1;
       el.style.height = parseInt(el.style.height)-1;
       currentStat[id]--;
       setTimeout("zoom('"+elId+"','"+id+"')",20);
     }
   }
   
   //-->
   </script>
   
   <div id="test0" style="position:absolute;top:10px;left:10px;width:200px;height:25px;border:1px solid #000000;"
        onmouseover="initZoom(this.id,'+',0);"
        onmouseout="initZoom(this.id,'-',0);">
     Testdiv "0" (50 px)
   </div>
   
   <div id="test1" style="position:absolute;top:10px;left:300px;width:200px;height:25px;border:1px solid #000000;"
        onmouseover="initZoom(this.id,'+',1);"
        onmouseout="initZoom(this.id,'-',1);">
     Testdiv "1" (100 px)
   </div>
   
   <div id="test2" style="position:absolute;top:70px;left:50px;width:200px;height:25px;border:1px solid #000000;"
        onmouseover="initZoom(this.id,'+',2);"
        onmouseout="initZoom(this.id,'-',2);">
     Testdiv "2" (50 px)
   </div>

   
   Leider müssen die onmouseover / onmouseout - Events mit drei Parametern versehen werden, aber immerhin funktioniert es.
   Viel Vergnügen damit, wenn es das ist, was du suchst.
   Gruß,
   dex
4. Autor dieses Themas

   programtools

   programtools hat kostenlosen Webspace.

   13:12, 23.3.2010

   Also erstmal vielen Dank!
   Der Code funktioniert einwandfrei, doch möchte ich dass das div groß und klein und wieder groß und wieder klein [...] wird, bis man die Maus runternimmt. Dann soll es weiterfahren, bis die standartposition erreicht ist und stehen bleiben, bis es wieder überfahren wird. Ich habe - leider ohne Erfolg - versucht deinen Code so umzubauen, dass er so wie gerade beschrieben klappt doch das klappt garnicht. Wie muss ich das ändern?? Es tut mir leid, dass ich mich beim Problemvorstellen oben nicht richtig ausgedrückt habe!
   MVG

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?