Sujet Précédent Sujet Suivant

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 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 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...

19 réponses

Réponse 1 / 19
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
24 juil. 2010 à 10:52
Oui, AJAX est un concept réalisable en Javascript.
2
Réponse 2 / 19
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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.
1
Réponse 3 / 19
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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>
1
Réponse 4 / 19
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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
1

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.
0
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...
0
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.
0
Réponse 8 / 19
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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' ;
}
0
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.
0
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
0
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.
0
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
0
Réponse 13 / 19
Utilisateur anonyme
23 juil. 2010 à 22:09
Il faut utiliser l'AJAX pour ça.
0
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.
0
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é!
0
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!
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
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';
    }
}
0
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.
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
25 juil. 2010 à 21:46
Tu peux le mettre avant « function display(id) »
Le tableau "blocs" doit contenir les ID des blocs à masquer.
0
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>
0
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"?
0
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.
0

Discussions similaires

ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
sortir des réseaux sociaux
barbapapy -
Xileh -

1 réponse
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Retrouver moi l'original
kornette87 -
rcdj79 -

3 réponses
image ?
youness -
Utilisateur anonyme -

11 réponses