Inclure du Php en cliquant sur une image

Résolu/Fermé

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010 - 23 juil. 2010 à 14:43
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 27 juil. 2010 à 13:36

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

A voir également:

Inclure du Php en cliquant sur une image
Image iso - Guide
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

19 réponses

Réponse 1 / 19

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
24 juil. 2010 à 10:52

Oui, AJAX est un concept réalisable en Javascript.

Réponse 2 / 19

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
Modifié par avion-f16 le 26/07/2010 à 18:02

<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

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
26 juil. 2010 à 23:10

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

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
27 juil. 2010 à 13:36

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 19

ideal
23 juil. 2010 à 15:18

soit une infobulle ou une petite fenêtre qui s'ouvre.

Réponse 6 / 19

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
23 juil. 2010 à 15:21

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

ideal
23 juil. 2010 à 16:29

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

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
23 juil. 2010 à 16:35

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

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
23 juil. 2010 à 16:59

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

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
23 juil. 2010 à 17:04

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

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
23 juil. 2010 à 18:58

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

lolosb Messages postés 292 Date d'inscription samedi 31 octobre 2009 Statut Membre Dernière intervention 20 février 2015 32
Modifié par lolosb le 23/07/2010 à 21:12

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

Utilisateur anonyme
23 juil. 2010 à 22:09

Il faut utiliser l'AJAX pour ça.

Réponse 14 / 19

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
24 juil. 2010 à 01:44

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.

lolosb Messages postés 292 Date d'inscription samedi 31 octobre 2009 Statut Membre Dernière intervention 20 février 2015 32
27 juil. 2010 à 11:31

Désolé!

Réponse 15 / 19

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
Modifié par Brebis Galeuse le 25/07/2010 à 10:37

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!

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
25 juil. 2010 à 15:50

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

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
25 juil. 2010 à 20:01

Bonjour,
Je ne comprend pas où je dois placer le code que tu m'as donné.
Merci encore pour ton investissement.

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
25 juil. 2010 à 21:46

Tu peux le mettre avant « function display(id) »
Le tableau "blocs" doit contenir les ID des blocs à masquer.

Réponse 17 / 19

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
26 juil. 2010 à 15:28

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

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
26 juil. 2010 à 20:28

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

Brebis Galeuse Messages postés 11 Date d'inscription vendredi 23 juillet 2010 Statut Membre Dernière intervention 27 juillet 2010
Modifié par Brebis Galeuse le 27/07/2010 à 03:54

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.

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

ALERT en php

Sur la plage...

Dechiffrer une image caché

code couleur associé a une image

Discussions similaires

Newsletters