Affichage dans une fenêtre fixe

Résolu/Fermé
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 - Modifié le 8 oct. 2019 à 19:31
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 - 9 oct. 2019 à 11:48
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
A voir également:

2 réponses

jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
8 oct. 2019 à 22:02
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>

1
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 1
9 oct. 2019 à 11:48
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)
0