Discussion :

[Casio]

Salutations,

Dans un site entièrement articulé en PHP (pages avec des include imbriqués), je cherche a faire un on mouse over sur des images.

- Soit sur la partie gauche (include (page PHP) à part) une galerie photo.
- Soit sur la partie droite une cellule vierge devant contenir les infos EXIF des photos (include (page PHP) à part)

Ce que je voudrais, c'est un script qui me permette d'afficher à la volée les données EXIF (contenu facilement dans un fichier PHP appelable par include) des images survolées dans la partie gauche...

Any idea ?
Je sèche... :-(

[ThomasR]

Bonjour,

Execute une fonction AJAX qui va appeler ton script PHP en lui passant en paramètres ton image, ce script te renvoie les infos dont tu as besoin au format texte (ou xml) et via les éléments du DOM tu les écris dans ta page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<img onmouseover="showImgInfos(this.src);" src="/images/1.jpg" alt="Visuel de ..." />
<div id="InfosImg"/>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
function showImgInfos(ImgSrc){
 getXhr();
    xhr.onreadystatechange = function()
    {
      if(xhr.readyState == 4 && xhr.status == 200)
      {
        var reponse = xhr.responseText;
        writediv(reponse,"InfosImg");
      }
    }
    xhr.open("POST","generer_infos_img.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send("imgsrc="+ImgSrc);
}
 
function writediv(texte,queldiv)
  {
    document.getElementById(queldiv).innerHTML = texte;
  }
var xhr = null;
 
function getXhr(){
        if(window.XMLHttpRequest)
           xhr = new XMLHttpRequest();
        else if(window.ActiveXObject){
           try {
                      xhr = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (e) {
                      xhr = new ActiveXObject("Microsoft.XMLHTTP");
                  }
        }
        else {
           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...vous n'aurez donc pas accès aux mises à jour, installez un navigateur plus récent (Mozilla Firefox, Internet Explorer 5 [...])");
           xhr = false;
        } 
      }

Et le fichier generer_infos_img.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<?php
if(isset($_POST['imgsrc']) && is_file($_POST['imgsrc'])){
    // traitement
   $buffer = '';
   return $buffer;
}
else{
  return 'Erreur, l\'image est introuvable';
}
?>

[Casio]

Hello,

Bon, je viens d'y passer une semaine à m'arracher les cheveux... Je n'y arrive pas du tout...

J'ai rajouté dans mon index.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(...)
<script>
function showImgInfos(ImgSrc){
 getXhr();
    xhr.onreadystatechange = function()
    {
      if(xhr.readyState == 4 && xhr.status == 200)
      {
        var reponse = xhr.responseText;
        writediv(reponse,"InfosImg");
      }
    }
    xhr.open("POST","generer_infos_img.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send("imgsrc="+ImgSrc);
}
 
function writediv(texte,queldiv)
  {
    document.getElementById(queldiv).innerHTML = texte;
  }
var xhr = null;
 
function getXhr(){
        if(window.XMLHttpRequest)
           xhr = new XMLHttpRequest();
        else if(window.ActiveXObject){
           try {
                      xhr = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (e) {
                      xhr = new ActiveXObject("Microsoft.XMLHTTP");
                  }
        }
        else {
           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...vous n'aurez donc pas accès aux mises à jour, installez un navigateur plus récent (Mozilla Firefox, Internet Explorer 5 [...])");
           xhr = false;
        } 
      }
</script>
(...)

Puis j'ai créer la page "generer_infos_img.php" à la racine, avec dedans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Partie incluse par le fichier generer_infos_img.php !-->
 
<?php
if(isset($_POST['imgsrc']) && is_file($_POST['imgsrc'])){
    // traitement
   $buffer = '';
   return $buffer;
   echo "toto";
}
else{
  return 'Erreur, l\'image est introuvable';
}
?>
 
<!-- Fin de partie incluse par le fichier generer_infos_img.php !-->

(J'avais rajouté le "echo "toto";" pour voir un changement avant de m'attaquer à l'EXIF... Même sans, ça ne marche po...)

Et enfin, j'ai rajouté à une de mes catégorie de galerie ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
(...)
echo "<a href=# onClick=\"window.open('wm.php?path=".$rep."/".$entree1."&wm=pict/wm2.png','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=1, copyhistory=0, menuBar=0, width=800, height=600');return(false)\">";
    echo '<img onmouseover="showImgInfos(this.src);" border=0 width='.$wid.' src="wm.php?path='.$vig.'/'.$entree.'&wm=pict/wm.png"></a><br></td>';
(...)

Par contre, pour le "<div id="InfosImg"/>", je ne sais pas ou le placer, ni son utilité...

Erf...

Any help ?

[ThomasR]

Bonsoir,

Le <div id="InfosImg"/> est censé contenir les infos EXIF de l'image sur laquelle tu cliques. Lorsque la fonction javascript showImgInfos(img_path) est appelée, le fichier generer_infos_img.php est exécuté. Il ne faut pas inclure le fichier generer_infos_img.php ! Il est lancé par l'objet XmlHttpRequest / ActiveX.

J'ai fait une erreur dans le script PHP, il ne faut pas faire de return car le script ne retourne rien Il faut simplement faire des echo, la fonction javascript ira récupérer le texte généré par le script.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
if(isset($_POST['imgsrc']) && is_file($_POST['imgsrc'])){
    // traitement
   $sizes = getimagesize($_POST['imgsrc']); 
   $buffer = 'Largeur : '.$sizes[0].'<br/>';
   $buffer .= 'Hauteur : '.$sizes[1].'<br/>';
   echo $buffer;
}
else{
  echo 'Erreur, l\'image est introuvable';
}

[Casio]

YES ! Indeed...

Il y a du mieux... Cela s'affiche bien au bon endroit, ceci dit il s'affiche maintenant : "Erreur, l'image est introuvable "

Voici la page en question : http://mathieu.charreyre.net/index.p...e&galerie=inso

Il ne faut pas aussi rajouter un on mouse over ?

[ThomasR]

Bonjour,

Avec la technique que tu utilises (un script PHP qui génère l'image), tu peux enlever la condition is_file($_POST['img_src']); qui sert en fait à vérifier l'existence du fichier passé en paramètre.