Discussion :

[ALeX850]

Bonjour,
J'ai un souci avec le site internet que je suis en train de faire.
En gros dans ma page, il y a des miniatures d'images et avec javascript et onclick dans la balise de l'image (donc avec une petite valeur de width et height); je modifie le src d'une image affichée en dessous, donc lorsque je clique sur une miniature, j'ai la même image qui s'affiche en gros (car dans cette balise img je n'ai pas changé les dimensions).

Voilà l'appel :

Code :

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

<?php echo '<img src="'.$donnees['image_chemin'].'" alt="miniature" id="miniapaysage" width="192" height="136" onclick="changerimage(this.src)" />'; ?>

Le code javascript (l'id de ma grande image est "grande"):

Code :

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

1
2
3
4
5
function changerimage(srcimage)
{
	document.getElementById("grande").src=srcimage;
	document.getElementById("urlimage").value = srcimage;
}

et dans mon index :

Code :

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

<?php echo'<img src="'.$urlimagedepart.'" alt="image participant" id="grande" />'; ?>

Le problème c'est que après, je ne "sais" plus quelle est la nouvelle image affichée dans la page en cours (dans mon index).

Ma question est tout simplement : comment puis-je connaître la nouvelle url de l'image modifiée ? J'en ai besoin pour savoir de quelle image il s'agit et afficher les informations la concernant.

(Je ne peux pas faire de formulaire avec un champs hidden, ça n'irait pas avec le modèle de la page)

Merci pour votre aide !

[philodido]

A quel moment tu voudrais récupérer l'info ? quelle action ?

[ALeX850]

Eh bien en fait l'url de l'image me permet de l'identifier, donc d'aller récupérer son titre et sa description.
Donc après avoir cliqué sur l'image, j'aimerais pouvoir connaître laquelle est-ce. Mais je n'ai trouver aucune voie pour faire transiter cette info.

[philodido]

Si tu veux récupérer l'url coté serveur au moment du clique sur l'image il faut que tu l'envoi en Ajax.

vite fait ça donnerait un truc comme ça :

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
function getXhr(){
 
  var xhr = null;
 
  if(window.XMLHttpRequest) // Firefox et autres
     xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
     try {
                 xhr = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
  }
  else { // XMLHttpRequest non supporté par le navigateur
     alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
     xhr = false;
  }
  return xhr;
}
 
function go(){
 
  var xhr = getXhr();
 
  // Ici comment faire du post
  xhr.open("POST","ajax.php",true);
 
  // ne pas oublier ça pour le post
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  // ne pas oublier de poster les arguments : ici, l'url de l'image
  xhr.send(srcimage);
}

et tu appel la fonction go() au moment du click dans la fonction changerImage() dans le cas présent.

ajax.php est le fichier où tu récupèrera la donnée coté serveur.

[ALeX850]

Merci pour ton aide !
Donc j'ai essayé de mettre en place ce que tu m'as dit :
j'ai créé un nouveau fichier .js où j'ai mis les deux fonctions, en remplaçant ajax.php par mon index.php et en ajoutant go() dans ma fonction changerimage().
mais ensuite dans mon index, comment j'accède à ce qui a été envoyé ?
Merci

[philodido]

Tu y accède comme une donnée post normale :

Code :

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

$urlImage = $_POST['srcimage'];