Inclure du Php en cliquant sur une image [Résolu/Fermé]

Signaler
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
 -
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 -
Bonjour à tous,

Voici mon problème.
Sur une même page, je dispose de plusieurs images. J'aimerais que chaque clic fait sur une image m'inclus sur cette même page un texte différent.

Je m'explique. En gros, on visualise une encyclo et chaque image correspond à une définition.
Je ne veux pas que toutes les définitions soit visibles en même temps mais à chaque clic de l'image associée.

Il est important pour moi que la définition soit inclue dans la même page que les images.

Désolé si je ne suis pas trop explicite ^^. Je débute à peine et je ne connais pas encore le java.

Merci de vos réponses. Cordialement, la brebis...

19 réponses

Réponse 1 / 19
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281
Oui, AJAX est un concept réalisable en Javascript.
2
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 19
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281 
<div id="texte_image1>
Tu as oublié de fermer le guillemet.
Pense aussi à masquer le div avec une classe CSS.
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Réponse 3 / 19
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281
En copiant ton code est en ajoutant ce guillemet, ça fonctionne très bien.

« Qu'entend tu par "masquer le div avec une classe CSS" ? »
Crées une classe CSS "hidden" :
.hidden { display: none; }
Ensuite, il te suffit de l'appliquer sur les div à masquer au chargement :
<div id="..." class="hidden">...</div>
Réponse 4 / 19
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281
Je me suis trompé avec la boucle "for ... in".
Voilà la fonction hideAll() corrigée :
function hideAll() {
	for(x in blocs) {
	    document.getElementById(blocs[x]).style.display = 'none';
	}
}


Pour masquer le div ouvert avant d'en afficher un autre, il suffit d'appeler la fonction hideAll() au début de la fonction display().
Ainsi, tous les div seront masqué, puis dans display(), tu affiches le nouveau div.
function display(id) {
	hideAll();
	var div = document.getElementById(id);
	div.style.display = (div.style.display == 'none') ? 'block' : 'none' ;
}


Et voilà un exemple complet :
https://gist.github.com/anonymous/3105f4f6b9a6bded949b
Réponse 5 / 19

soit une infobulle ou une petite fenêtre qui s'ouvre.
Réponse 6 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Bonjour,
J'aimerais utiliser la fonction php "include" car il ne s'agit pas d'une simple définition. Il y a de la mise en page, des wallpapers, etc...
Réponse 7 / 19

je crois pas que cette fonction est faite pour çà. Il faut créer des pages ou utiliser des ancres nommées.
Réponse 8 / 19
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281
Salut.

Tu peux écrire le contenu dans des div masquées lors de la génération de la page. Pour afficher la div, il suffira de passer par du JS.

Par exemple :
<a href="image.png" onclick="afficher('id_de_la_definition');"><img src="image.png" alt="Texte alternatif" /></a>

<div id="id_de_la_definition">
    <!-- La bla bla -->
</div>
Et la fonction JS :
function afficher(id) {
    var div = document.getElementById(id);
    div.style.display = (div.style.display == 'block') ? 'none' : 'block' ;
}
Réponse 9 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Merci Avion,

Mais il ne s'agit pas vraiment de ce dont j'ai besoin (enfin je pense^^).
Je m'explique. Mon site concerne une équipe que je monte pour un jeu vidéo.
Sur le menu en haut de la page, il y aura une image affichant l'avatar de chaque membre de l'équipe.
En cliquant dessus, je veux afficher la fiche du joueur ainsi que des image de son équipement, des screenshot, etc. en dessous de ce menu.

Est ce un peu mieux expliquer?

Merci encore d'avance.

PS : Je précise à nouveau que je n'ai aucune connaissance en JS.
Réponse 10 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Ou plutot, est ce qu'il est possible de dire :
- quand je clic sur image 1, je met ma variable $joueur=1
- quand je clic sur image 2, je met ma variable $joueur=2
- quand je clic sur image 3, je met ma variable $joueur=3

Si:
$joueur=1
alors
<?php include("joueur1.php"); ?>

Si:
$joueur=2
alors
<?php include("joueur2.php"); ?>

Si:
$joueur=3
alors
<?php include("joueur3.php"); ?>


Tu vois un peu le genre de code que je recherche? (si c'est faisable bien entendu :p
Réponse 11 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Voici le code que je viens de créer mais il ne fonctionne pas.
Si ca peut vous aider à trouver mon problème: 
<div id="perso">
<h3>Les membres</h3>
<table>
   <tr>
      <td><FORM><INPUT type=image src="membre1.png"  name="m1" alt="Cliquer" value="<?php $membre = 1;?>"/><FORM></td>

       <td><FORM><INPUT type=image src="membre2.png"  name="m2" alt="Cliquer" value="<?php $membre = 2;?>"/><FORM></td>

      <td><FORM><INPUT type=image src="membre3.png"  name="m3" alt="Cliquer" value="<?php $membre = 3;?>"/><FORM></td>
   </tr>
</table>

<br/>
<br/>
		
		
<?php
if($membre=1){
    include("membre1.php");
}
elseif($membre=2){
    include("membre2.php");
}
elseif($membre=3){
    include("membre3.php");
}
echo $membre;
?>


</div>


Merci de votre aide.
Réponse 12 / 19
Messages postés
292
Date d'inscription
samedi 31 octobre 2009
Statut
Membre
Dernière intervention
20 février 2015
 31
Salut,

Tu peux tout faire avec la fonction GET:
Si tu as une page nommée images.php: 
<!-- Tu affiches les images avec un lien "images.php?image[numéro]" comme suit: --> 
<a href="images.php?image1"><img src="url_de_image_1" alt="description_de_image_1"/></a> 
<!-- Puis tu intégre un code php: --> 
<?php  
// on met une condition si "?image[numéro]" 
if ($_GET['image1']) 
{ 
     $texte = "Le texte si la fin est '?image1'..."; // on définit le texte 
     //ou bien si tu veux inclure une définition:
     include 'definition1.php';
} 
//et ça tu reprends autant de fois que t'as d'images... 
//et puis tu affiches le texte: (que tu n'as pas besoin avec la version include)
echo $texte; 
?>


Comme ça tu as par image un ?image[numéro]

J'espère que je t'ai aidé!
@+
bien cordialement,
Administrateur LOLOSB© productions
Réponse 13 / 19

Il faut utiliser l'AJAX pour ça.
Réponse 14 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Bonjour lolsb et maxime.

Je viens d'essayer le code que tu viens de me donner lolosb mais ca ne fonctionne pas. Du moins ce n'est pas le résultat que je recherche.

Pour ce qui est d'AJAX, j'en ai entendu parlais et il semblerait que c'est ce qui correspondrait. Mais il faut connaitre le JS non.
Signaler
Messages postés
292
Date d'inscription
samedi 31 octobre 2009
Statut
Membre
Dernière intervention
20 février 2015
 31
Désolé!
Réponse 15 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Bonjour,
J'ai réussi à me dépatouiller en utilisant des block "Div" que je cache ou que je fait apparaitre en cliquant sur les images correspondantes.

Voici le code (si ca intéresse certain) : 

<html> 

<head> 
</head> 

<body> 

<input type=image src="image1.png"  name="image1" alt="Cliquer" value="Cacher" onclick="display('texte_image1')"/> 

<script type="text/javascript"> 
function display(id) 
 { 
  if (document.getElementById(id).style.display == 'none') 
{ document.getElementById(id).style.display = 'block'; } 
 else  
{ document.getElementById(id).style.display = 'none'; } 
} 
</script> 

<div id="texte_image1> 
<p> 
<?php {include("teste_image1.php");} ?> 
</p> 
</div> 

</body> 
</html>



Voilou!
Néanmoins, un détail me chagrine. Est il possible de le modifier pour :
- 1 : Avoir tout les blocks cachés à l'ouverture de la page
- 2 : Fermer le block ouvert à l'ouverture d'un autre block

Merci d'avance!
Signaler
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281
Pour tes deux questions, je te propose de créer une fonction qui cache tous les blocs.
Cette fonction sera appelée au chargement de la page (window.onload) et au début de la fonction display().

Par exemple :
var blocs = new Array('texte_image1','texte_image2','...');

function hideAll() {
    for(id in blocs) {
        document.getElementById(id).style.display = 'none';
    }
}
Réponse 16 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Bonjour,
Je ne comprend pas où je dois placer le code que tu m'as donné.
Merci encore pour ton investissement.
Signaler
Messages postés
18536
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 avril 2021
 4 281
Tu peux le mettre avant « function display(id) »
Le tableau "blocs" doit contenir les ID des blocs à masquer.
Réponse 17 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Bonjour,

Voici comme j'ai placé le code que tu m'as donné mais il ne fonctionne toujours pas. Peux tu me dire d'où vient le problème? Merci d'avance. 

<html> 

<head> 
</head> 

<body> 

<input type=image src="image1.png"  name="image1" alt="Cliquer" value="Cacher" onclick="display('texte_image1')"/> 

<script type="text/javascript"> 

var blocs = new Array('texte_image1');

function hideAll() {
    for(id in blocs) {
        document.getElementById(id).style.display = 'none';
    }
}


function display(id) 
 { 
  if (document.getElementById(id).style.display == 'none') 
{ document.getElementById(id).style.display = 'block'; } 
 else  
{ document.getElementById(id).style.display = 'none'; } 
} 
</script> 

<div id="texte_image1> 
<p> 
<?php {include("texte_image1.php");} ?> 
</p> 
</div> 

</body> 
</html>
Réponse 18 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Salut,
Désolé, j'ai fait un mauvais copié/merdé lol.
Dans mon code source, les guillemets sont bien présents.

Qu'entend tu par "masquer le div avec une classe CSS"?
Réponse 19 / 19
Messages postés
11
Date d'inscription
vendredi 23 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
Donc en reprenant ton code et en créant le Css qui va bien, j'ai résolu le point 1 qui était : Avoir tout les blocks cachés à l'ouverture de la page.
Je t'en remercie car je commencais à desepérer ^^.

Maintenant le point 2, à savoir "Fermer le block ouvert à l'ouverture d'un autre block", est toujours présent.
Que faudrait il faire pour m'en affranchir?

Merci d'avance F16, je suis sur que tu trouveras la solution lol.
Posez votre question