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();
?>
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>';
en haut à gauche de ce sujet.