[PHP-JS] Onmouse over particulier

Version imprimable

27/10/2008, 14h45
Casio

[PHP-JS] Onmouse over particulier

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... :-(

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:

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

Code:

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:

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';
}
?>

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:

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:

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:

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 ? :(

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:

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'; }

08/12/2008, 20h21
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 ?
09/12/2008, 11h29
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.
09/12/2008, 15h29
Casio

YES !!!

Merci infiniment, des mois que je planche la dessus... :)

Ça marche : -=> http://mathieu.charreyre.net

Grâce à vous ;)