Forum d'entraide PHPFrance

Bonjour à tous,

J'ai crée un tableau en php pour afficher des images à partir des données de la base de données. Cependant, j'aimerais faire un zoom lorsque l'utilisateur clique sur l'image miniature. On verra apparaitre un gros bloc transparent avec au milieu l'image zoomé.

voilà mon code PHP



$NbrCol = 4;
// requete
$table = 'voitures';
$condition = ' WHERE DONNEE LIKE \'b%\' ORDER BY DONNEE ASC';
$query = 'SELECT * FROM '.$table;


$result = mysql_query($query);

// -------------------------------------------------------
$NbreData = mysql_num_rows($result);
// -------------------------------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) {
$j = 1;
echo '<table border="1">';
while ($val = mysql_fetch_array($result)) {
   if ($j%$NbrCol == 1) {
      $NbrLigne++;
      echo "<tr>";
      $fintr = 0;
   }
   echo '<td>';
    // ------------------------------------------
    // AFFICHAGE des DONNEES de la fiche
   echo $val['marque'];
    echo '<br>';
   echo '

   <img src="Image/'.$val['id'].'.jpg" width="233" height="200" alt=""  onClick="document.getElementById['fenetre'].style.visibility='visible'"/>';   
   
   
   echo '<br>';
   echo '<i>'.$val['prix'].'€</i>';
    // ------------------------------------------
   echo '</td>';
   if ($j%$NbrCol == 0) {
      echo "</tr>"; 
      $fintr = 1;
   }
   $j++;

}
if ($fintr!=1) { echo '</tr>'; }
echo '</table>';
} else {
echo 'pas de données à afficher';
}

?>



</body></html>
<?php
// deconnexion de la base
mysql_close(); 
?>

Le code ci dessu m'affiche une erreur à la ligne de l'affichage des images pour le javascript.

ce code je ne sais pas où le mettre

<div style= " top:20%;left:50%; width:400px; height:100px;  visibility:hidden;" id="fenetre">

   <img src="Image/'.$val['id'].'.jpg" width="553" height="800" alt=""  />  
    </div>';

1. Tu as des quotes simples imbriquées d'où l'erreur.

2. Le "C" de onClick doit être en minuscule pour respecter la norme.

3. getElementById('fenetre') c'est mieux.

4. tu peux mettre le bloc DIV sous la vignette. Le style jouera son rôle.
> http://forum.alsacreations.com/faq/faq- ... ment-.html
> http://css.alsacreations.com/Faire-une- ... web-en-CSS
Des pistes pour centrer horizontalement et verticalement ton zoom.

Au lieu de mettre le style en "dur" fait une classe dans ta feuille de style, c'est plus propre.

tu parles des quotes simple au niveau de visible?

tu parles des quotes simple au niveau de visible?

oui

echo '

   <img src="Image/'.$val['id'].'.jpg" width="233" height="200"  onclick="document.getElementById("fenetre").style.visibility="visible""; />
   
   <div style= " top:20%;left:50%; width:400px; height:100px;  visibility:hidden;" id="fenetre">

   <img src="Image/'.$val['id'].'.jpg" width="553" height="800" alt=""  />  
    </div>
   
   ';

il n'ya pas d'erreur mais j'ai le div qui est affiché alors qu'il est censé être caché?

echo '<img src="Image/'.$val['id'].'.jpg" width="233" height="200" onclick="document.getElementById(\'fenetre\').style.visibility=\'visible\'"; /> 
	<div style="top:20%;left:50%; width:400px; height:100px; visibility:hidden;" id="fenetre">
	<img src="Image/'.$val['id'].'.jpg" width="553" height="800" alt="" />   
	</div>';

pk as tu utilisé le /' /' à la place " "?

C'est \' et non /'

Il s'agit du caractère d'échappement : http://www.phpfrance.com/tutoriaux/inde ... gic-quotes

ok merci

Modération :
sasuuke, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton

en haut à gauche de ce sujet.

Forum d'entraide PHPFrance

Zoom image lors du click

Zoom image lors du click