Inclure du Php en cliquant sur une image

Résolu

Brebis Galeuse Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention - 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...

Afficher la suite

A voir également:

Inclure du Php en cliquant sur une image
Légender une image - Guide
Image iso - Guide
Transformer une image en icone - Guide
Mettre une image en filigrane sur word - Guide
Comment rechercher une image sur google - Guide

19 réponses

Réponse 1 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

Réponse 2 / 19

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

<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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

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

Réponse 6 / 19

Brebis Galeuse Messages postés 11 Date d'inscription Statut Membre Dernière intervention

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

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 32

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

Il faut utiliser l'AJAX pour ça.

Réponse 14 / 19

Brebis Galeuse Messages postés 11 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 32

Désolé!

Réponse 15 / 19

Brebis Galeuse Messages postés 11 Date d'inscription Statut Membre Dernière intervention

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

PIX

Dechiffrer une image caché

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

ne pas utiliser la souris mais le clavier

image ?

Votre réponse

Discussions similaires