Probleme fonction slideshow par SakuraKage - page 1

Bonjour,
Je viens demander votre aide parce que j'ai un soucis que je n'arrive pas à résoudre.

Le problème est le suivant :
J'ai une page web avec une image affichée ( un autre est pré-chargée )
Lors de l'appuie sur un bouton ( start ) l'image affichée est "remplacée" par celle pré-chargée.
En réalité, les deux images se trouvent dans des div, qui sont masqué/affichés grâce au javascript.

Le problème est que parfois au chargement de la page les deux images sont déjà affichée.

Je sollicite donc votre aide pour réussir à faire en sorte qu'il n'y ai plus ce problème.
Merci d'avance.

Voila le script complet de ma page :

<head>
 
<style type="text/css">

body {
	background-color: #D6D6D6;
	color: #000;
}
</style>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><body>
<table width="1024" border="0" align="center">
  <tr>
    <td height="768" bgcolor="#D6D6D6"><table width="900" height="513" border="1" align="center">
      <tr>
        <td height="449" valign="top" bgcolor="#909090"><?php
 
$dir = "./images/";
$opened_dir = opendir($dir);
if(!$opened_dir) die('Erreur');
$image_list = array();
$i = 0;
while ( ($file = readdir($opened_dir)) !== FALSE )
{
      if( is_file($dir.$file) )
      {
            $image_list[$i] = $file;

            $i++;
      }
}
 
closedir($opened_dir);

$i = mt_rand(0,count($image_list)-1);

$imag = $image_list[$i]{0};
?>

          <table width="842" border="0">
  <tr>
    <td width="21">&nbsp;</td>
    <td width="811"> MED : Micro-Expression Decoder</td>
  </tr>
</table>
<script type="text/javascript">

var test =  setTimeout(function(){document.getElementById('imgPatienter').style.display = "block";document.getElementById('animFlash').style.display = "none";},0);
</script><table width="850" height="445" border="0" align="center">
          <tr>
            <td width="400" height="441" bgcolor="#000000"><table width="400" height="441" border="1">
              <tr>
                <td> 
                
                             
                
                 <div id="imgPatienter">
<img src="images/N.bmp"  />
</div>
 
<div id="animFlash">
<img src="images/<?php echo "$image_list[$i]" ?>"  />
</div>




</td>
              </tr>
            </table></td>
            <td width="34">&nbsp;</td>
            <td width="400" align="center" valign="bottom" bgcolor="#D6D6D6"><table width="400" height="441" border="1">
  <tr>
    <td height="403" align="center"><table width="186" height="7" border="1" cellspacing="1">
  <tr>
    <td width="176" align="center" valign="middle" bgcolor="#000000">
	   
	<?php if ($_GET['this'] == g ) 
				echo "<p class='1' style='color:#0F0'>RIGHT!</p>";
				else if ($_GET['this'] == ng )
				echo "<p class='2' style='color:#F00'>WRONG!</p>";
				else 
				echo "<p class='3' style='color:#FFF'>Choisissez une reponse!</p>"; ?></td>
  </tr>
</table>

              <br>
              <form id="emotion" name="emotion" method="post" action="<?php if ($_POST['g']) 
					echo "?this=g";
				else if ($_POST['g'] == "") 
					echo "?this=ng&exp=$imag"; 
					
					
					
			$imag = $image_list[$i]{0};
			$J1 = $J{0};
			$C1 = $C{0};
			$T1 = $T{0};
			$D1 = $D{0};
			$S1 = $S{0};
			$P1 = $P{0};
			$M1 = $M{0};
			$N1 = $N{0};?>">
                <p>
                      <input type="submit" style="height: 25px; width: 100px"  name="<?php if ($imag == J) echo "g"; ?>" id="<?php if ($imag == J) echo "g"; ?>" value="Joie" />
                  <br />
          <input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == C) echo "g"; ?>" id="<?php if ($imag == C) echo "g"; ?>" value="Colere" />
         
            <br />
            <input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == T) echo "g"; ?>" id="<?php if ($imag == T) echo "g"; ?>" value="Tristesse" />
        
          <br />
        
            <input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == D) echo "g"; ?>" id="<?php if ($imag == D) echo "g"; ?>" value="Degout" />
         
          <br />
         
            <input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == S) echo "g"; ?>" id="<?php if ($imag == S) echo "g"; ?>" value="Surprise" />
      
          <br />
       
            <input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == P) echo "g"; ?>" id="<?php if ($imag == P) echo "g"; ?>" value="Peur" />
         
          <br>
<input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == M) echo "g"; ?>" id="<?php if ($imag == M) echo "g"; ?>" value="Mepris" />
         
            <br />
            <input type="submit" style="height: 25px; width: 100px" name="<?php if ($imag == N) echo "g"; ?>" id="<?php if ($imag == N) echo "g"; ?>" value="Neutre" />
         
        </p>
       
            </form><FORM>
      <br>
      <br>
      <br>
      <INPUT type="button" style="height: 25px; width: 100px" value="Start" id="bt">
  </FORM>
  <script type="text/javascript">
  i1 = new Image();
i1.src = "images/<?php echo $image_list[$i]; ?>";
document.getElementById("bt").onclick = function(event)
{
	i2 = new Image();
i2.src = "images/<?php echo $image_list[$i]; ?>";
	var test =  setTimeout(function(){document.getElementById('imgPatienter').style.display = "none";document.getElementById('animFlash').style.display = "block";},100);

var test =  setTimeout(function(){document.getElementById('imgPatienter').style.display = "block";document.getElementById('animFlash').style.display = "none";},150);
i3 = new Image();
i3.src = "images/<?php echo $image_list[$i]; ?>";
<?php $imag = $image_list[$i]{0}; ?>
}
</script>
  <?php 
  $ceci = "";
  
  if ($_GET[exp] == C)
  	$ceci = "Colére";
  else if ($_GET[exp] == J)
    $ceci = "Joie";
  else if ($_GET[exp] == T)
    $ceci = "Tristesse";
   else if ($_GET[exp] == D)
    $ceci = "Dégout";
   else if ($_GET[exp] == S)
    $ceci = "Surprise";
  else if ($_GET[exp] == P)
    $ceci = "Peur";
  else if ($_GET[exp] == M)
    $ceci = "Mepris";
  else if ($_GET[exp] == N)
    $ceci = "Neutre";
  else if ($_GET[exp] == i)
    $ceci = "Surprise";

    if (($_POST['g'] == "") && ($_GET['this'] == ng)) 
				echo "<p class='1' style='color:#000'>La réponse était : $ceci </p>";
 
			
  ?>
  
   <?php 
  if ($_POST['g'])
 	echo "<SCRIPT LANGUAGE='JavaScript'>
     document.location.href='http://maxou1er.free.fr/?this=g' 
</SCRIPT>";

  ?>
  <SCRIPT type"text/javascript">
function clicj()  
{
<?php if ($image_list[$i]{0} == J )
																	$reponse = "R";
															else 
																	$reponse = "W"; ?>
}
</SCRIPT>
 
  <?php $image_list[$i] = $image_list[$i]{0};

?></td>
  </tr>
</table></td>
          </tr>
        </table>
<br>
<table width="419" border="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td width="389">VITESSE : 1/15 | DIFFICULTE : Expert</td>
  </tr>
</table></td>
      </tr>
    </table></td>
  </tr>
</table>

</body>
</head>

Voici le code qui pose soucis :

<script type="text/javascript">

var test =  setTimeout(function(){document.getElementById('imgPatienter').style.display = "block";document.getElementById('animFlash').style.display = "none";},0);
</script>

<script type="text/javascript">
  i1 = new Image();
i1.src = "images/<?php echo $image_list[$i]; ?>";
document.getElementById("bt").onclick = function(event)
{
	i2 = new Image();
i2.src = "images/<?php echo $image_list[$i]; ?>";
	var test =  setTimeout(function(){document.getElementById('imgPatienter').style.display = "none";document.getElementById('animFlash').style.display = "block";},100);

var test =  setTimeout(function(){document.getElementById('imgPatienter').style.display = "block";document.getElementById('animFlash').style.display = "none";},150);
i3 = new Image();
i3.src = "images/<?php echo $image_list[$i]; ?>";
<?php $imag = $image_list[$i]{0}; ?>
}
</script>

SakuraKage

17 juin 2010 à 16:57:51

LCaba

17 juin 2010 à 17:10:40

Salut, ton code est brouillon et très difficile à relire :-/
Un conseil pour changer une image, charge la plutot dans un objet image :

// On crée les objets
var oImage1 = 
    oImage2 = new Image();
// Puis on charge les images dans les objets
oImage1.src = 'adresseDeLImage1';
oImage2.src = 'adresseDeLImage2';

Ensuite tu as une balise image dans ton html :
<img id="monImage" src="adresseDeLImage1" alt=""/>

Ensuite en JS pour changer d'image :

var oMonImage = document.getElementById('monImage');

oMonImage.src = oImage2.src; // Affiche l'image 2
oMonImage.src = oImage1.src; // Affiche l'image 1

C'est plus propre et ça aère un peu ton code html et ça n'utilise pas le css

Enfin pour t'y retrouver ne met pas du js partout dans la page, met tout à la fin, ou mieux dans un fichier externe.

Et à quoi sers un setTimeout avec 0 en 2e argument ?

Cabinet vétérinaire à Angers

17 juin 2010 à 17:29:52

Merci pour votre réponse, je vais essayer de faire ce que vous me dites.
Pour ce qui est du code, je sais qu'il est très brouillon, et je m'en excuse, plus tard je ferai quelque chose, l'important pour le moment c'est de faire fonctionner tout ca.

Pour le premier SetTimout avec 0 c'est celui qui permet au depart de ne pas affiché les images.
Sans celui la, les deux images s'affichent.

17 juin 2010 à 17:47:11

Ben autant mettre directement le contenu:

setTimeout(function(){document.getElementById('imgPatienter').style.display = "block";document.getElementById('animFlash').style.display = "none";},0);

Est équivalent à ça :

document.getElementById('imgPatienter').style.display = "block";document.getElementById('animFlash').style.display = "none";

Et le code, c'est pour toi qu'il doit être propre, pour que tu puisse le débugger facilement par exemple.

Enfin hésite pas à tutoyer les gens ici, sinon on va te regarder bizarrement

Probleme fonction slideshow

Probleme fonction slideshow

Supprimer

Modérer

Signaler le message aux modérateurs