Affichage dans une fenêtre fixe [Résolu]

Signaler
Messages postés
108
Date d'inscription
samedi 19 juin 2010
Statut
Membre
Dernière intervention
9 octobre 2019
-
Messages postés
108
Date d'inscription
samedi 19 juin 2010
Statut
Membre
Dernière intervention
9 octobre 2019
-
Bonjour,

J'ai fait un script qui permet de lire les photos dans un répertoire pour les afficher dans un tableau. Sur un onMouseOver l'image s'agrandit, puis redevient normale sur un onMouseOut. Mais le zoom est très fatigant pour les yeux. J'aimerai que l'image agrandie soit produite dans une zone fixe. Ci joint mon script pour 4 colonnes. Je pourrais le faire sur 1 colonne pour mettre une zone de vision sur le côté! Suis je clair?

**Modifié par la modération pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE

voici mon script :
<?php
$dir="./imgs/";
?>
<html> 
<body>
<br>
<table align='center'><tr>
<?php 
$i=0;
     if (is_dir ($dir))
  { // si c'est un repertoire on l'ouvre
     $dh = opendir ($dir); 
         while (($file = readdir ($dh)) !== false ) 
  { 
         if ($file !== '.' && $file !== '..')
      {
      $photo=$dir."/".$file;
 ?>        
<td>  
<img src=<?PHP echo $photo;?> title=<?PHP echo $file;?>  height="200" onMouseOver="height='600'" onMouseOut="height='200'">
 </a></td>
  <?php
     $i++; 
     if ($i==4)
      {
      echo "</tr><tr>";
      $i=0;
      }
       }
   }
 }
 if ($i>0){echo "</tr>";}///on ferme la derniere balise <tr>


?> 
 </table>




Configuration: Windows / Opera Next 63.0.3368.107

2 réponses

Messages postés
29600
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 septembre 2020
2 792
Bonjour,

Inspire toi de ça :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST</title>
   
  </head>
  <body>
      <div>
        <img src="tonimage1.pg"  height="200" onMouseOver="zommImg(this);" onMouseOut="retirerImage();">
        <img src="tonimage2.pg"  height="200" onMouseOver="zommImg(this);" onMouseOut="retirerImage();">
      </div>
    
      <div>
        <img src="" id="affichage_img">
      </div>
    
    <script type="text/javascript">
        function zommImg(elm){
           var image = elm.src;
           document.getElementById('affichage_img').src = image;
        }
        
        function retirerImage(){
          document.getElementById('affichage_img').src="";
        }
    </script>
  </body>
</html>

Messages postés
108
Date d'inscription
samedi 19 juin 2010
Statut
Membre
Dernière intervention
9 octobre 2019

Merci Jordane45... Tu m'as donné la solution! Il me reste à l'adapter à mon script pour que l'image soit sur la droite..ça doit pas être insurmontable ;o)