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

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
Afficher la suite 

2 réponses

Meilleure réponse
Messages postés
26486
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2019
1825
1
Merci
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>

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 62626 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
Messages postés
108
Date d'inscription
samedi 19 juin 2010
Statut
Membre
Dernière intervention
9 octobre 2019
0
Merci
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)
Commenter la réponse de clé de 12