Bild switchen...

H

Hansii1234

Mitglied
Hey ihr!

Hab mal ne Frage...
Ich hab mir heut schnell ein kleines Script geschrieben, welches zwei Bilder (das eine links zur hälfte und das andere rechts zur hälfte) direkt nebeneinander anzeigt.
Sobalt man mit der Maus auf dem einen geht, fährt bei diesem dann die fehlente Hälfte über dem daneben liegenden. Soweit so gut, geht auch... Zumindest wenn man anständig auf das Bild geht.
Sobalt man aber schnell mit dem Mausezeiger drüber fährt oder schnell rein und wieder raus oder ähnliches, fängt es das spinnen an... ich hab schon verschiedene sachen ausprobiert, es hat aber bis jetzt nichts geholfen! Wär echt cool, sofern mir jemand von euch helfen kann!

Schonmal Danke im Vorraus! :)


Hier der Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <script>
  var zIndex=0;
  var counter_in=0;
  var counter_out=0;  
  var width_in=0;
  var left_in=0;
  var margin_in=0;
  var width_out=0;
  var left_out=0;
  var margin_out=0;
  var loadet=0;
  var unloaded=0;
  
  
  function change_in(id_in){
  if (loadet==0){
  loadet=1;
  window.setTimeout('size_max('+id_in+')', 1);}
  }
  
  function size_max(id_in){
      counter_in++;
      if(counter_in==1){
      zIndex++;
      width_in=50;
      left_in=150;
      margin_in=-50;
      }

      width_in=width_in+2;
      document.getElementById('div_bild'+id_in).style.zIndex=zIndex;
      document.getElementById('div_bild'+id_in).style.width=width_in;
      
      if(id_in==2){
      left_in=left_in-2;
      margin_in=margin_in+2;
      document.getElementById('div_bild'+id_in).style.left=left_in;
      document.getElementById('bild'+id_in).style.marginLeft=margin_in;
      }
      
      if(width_in<100){
      window.setTimeout('size_max('+id_in+')', 1);}
      else{counter_in=0;loadet=0;}
      
      }
      
      
    function change_out(id_out){
    if(unloaded==0){
    uloaded=1;
    window.setTimeout('size_min('+id_out+')', 1);}
    }
  
    function size_min(id_out){
      
      counter_out++;
      counter_in=0;
      
      if(counter_out==1){
      width_out=width_in;
      left_out=left_in;
      margin_out=margin_in;}
      
      width_out=width_out-2;
      
      document.getElementById('div_bild'+id_out).style.width=width_out;
      
      if(id_out==2){
      left_out=left_out+2;
      margin_out=margin_out-2;
      document.getElementById('div_bild'+id_out).style.left=left_out;
      document.getElementById('bild'+id_out).style.marginLeft=margin_out;
      }
      
      if(width_out>50){
      window.setTimeout('size_min('+id_out+')', 1);}
      else{
      counter_out=0;
      uloaded=0;
      }
      }
      
    function show(id){
      
      }
  </script>
<div id="neuneu">
<div id="div_bild1" onmouseover="change_in(1);" onmouseout="change_out(1);" style="left:100px;position:absolute;overflow:hidden;width:50px;"><img src="bild1.jpg" onclick="show(1);" id="bild1" style="width:100px;height:75px;border:1px solid #000055;"></div>
<div id="div_bild2" onmouseover="change_in(2);" onmouseout="change_out(2);" style="left:150px;position:absolute;overflow:hidden;width:50px;"><img src="bild2.jpg" onclick="show(2);" id="bild2" style="margin-left:-50px;width:100px;height:75px;border:1px solid #000055;"></div>
</div>
  </body>
</html>

Gruß!

Achja... sorry wegen den fehlenten Kommentaren... hab ich schnell schnell gemacht...
 
Zuletzt bearbeitet:
Das Problem liegt an deinen globalen Variablen also margin_out , left_out etc.

Angenommen Du scrollst über die Linke seite dann fängt das Timeout an margin_out zu verändern , nun ganz flott über die rechte seite , margin_out wird überschrieben und der linke Teil welcher noch nicht ganz fertig ist mit seiner Aktion nimmt nun den neuen Wert von margin_out,left_out etc und somit flippt es aus.

Da musst dann schon anfangen zu kapseln zum Beispiel eigene Klasse in JavaScript wo für jedes Bild genau eine Instanz existiert die dann die Funktionalität übernimmt.
 
Hmmm...
Habs jetzt mir Arrays gemacht (für jedes Bild eines), nur des Resultat ist das selbe...

Code: 
  <script>
  Bild1 = new Array(); 
  Bild2 = new Array();
  var counter_in=0;
  var counter_out=0;
  var zIndex=0;
  
  function bigger(id){
      counter_in++;
      if(counter_in==1){
      zIndex++;
      window["Bild"+id]["width_in"]=50;
      window["Bild"+id]["left_in"]=150;
      window["Bild"+id]["margin_in"]=-50;}
      

      window["Bild"+id]["width_in"]=window["Bild"+id]["width_in"]+2;
      document.getElementById('div_bild'+id).style.zIndex=zIndex;
      document.getElementById('div_bild'+id).style.width=window["Bild"+id]["width_in"];
      
      if(id==2){
      window["Bild"+id]["left_in"]=window["Bild"+id]["left_in"]-2;
      window["Bild"+id]["margin_in"]=window["Bild"+id]["margin_in"]+2;
      document.getElementById('div_bild'+id).style.left=window["Bild"+id]["left_in"];
      document.getElementById('bild'+id).style.marginLeft=window["Bild"+id]["margin_in"];
      }
      
      if(window["Bild"+id]["width_in"]<100){
      window.setTimeout('bigger('+id+')', 1);}
      else{counter_in=0;} 
      }
      

    function out(id){
      
      counter_out++;
      counter_in=0;
      
      if(counter_out==1){
      window["Bild"+id]["width_out"]=window["Bild"+id]["width_in"];
      window["Bild"+id]["left_out"]=window["Bild"+id]["left_in"];
      window["Bild"+id]["margin_out"]=window["Bild"+id]["margin_in"];}
      
      window["Bild"+id]["width_out"]=window["Bild"+id]["width_out"]-2;
      
      document.getElementById('div_bild'+id).style.width=window["Bild"+id]["width_out"];
      
      if(id==2){
      window["Bild"+id]["left_out"]=window["Bild"+id]["left_out"]+2;
      window["Bild"+id]["margin_out"]=window["Bild"+id]["margin_out"]-2;
      document.getElementById('div_bild'+id).style.left=window["Bild"+id]["left_out"];
      document.getElementById('bild'+id).style.marginLeft=window["Bild"+id]["margin_out"];
      }
      
      if(window["Bild"+id]["width_out"]>50){
      window.setTimeout('out('+id+')', 1);}
      else{
      counter_out=0;}
      }
 
Ich glaube das liegt nicht an dem, dass die Daten übernommen werden
(hab ja auch bei V.1 deshalb extra die loaded und unloaded variable, welche das aufziehen eines bildes erst erlaubt, sofern das andere fertig ist...) da ich nochmals extra nur für Bild1 zwei eigene Funktionen die das Hin- und Herswitchen managen geschrieben aber sobalt man schnell rein und raus geht, spinnt es wieder...

Gibt es denn noch eine andere Funktion für sowas um 'langsame' Schleifen bzw. Wiederholungen zu durchführen anstatt von "window.setTimeout('out...', XXX);"?

Oder kann man While-Schleifen irgendwie verlangsamen?

Gruß!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück