Charger le contenu de div en appuyant sur une texte
Résolu
conseil198
Messages postés
54
Statut
Membre
-
Naj -
Naj -
Bonjour,
Sur une page en PHP, j'ai deux phrase et deux div, le problème c'est que j'aimerais bien faire en cliquant sur une texte le div associe à elle s'affiche.
JE ME DEMANDE SI VOUS POUVEZ M'AIDER, MERCI A L'AVANCE
CORDIALEMENT
Sur une page en PHP, j'ai deux phrase et deux div, le problème c'est que j'aimerais bien faire en cliquant sur une texte le div associe à elle s'affiche.
JE ME DEMANDE SI VOUS POUVEZ M'AIDER, MERCI A L'AVANCE
CORDIALEMENT
2 réponses
-
Pour ton problème il suffit d'écrire une fonction javascript qui va permettre l'affichage de ton div en utilisation la méthode "onclick".
Lorsqu'on clique sur le texte on affiche le div avec son contenu.
Voici un exemple de code que tu pourra adapter.
<script type="text/javascript">
function afficher_cacher(id)
{
if(document.getElementById(id).style.visibility=="hidden")
{
document.getElementById(id).style.visibility="visible";
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
}
else
{
document.getElementById(id).style.visibility="hidden";
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
}
return true;
}
</script>
<body>
<span id="bouton_texte" onclick="afficher_cacher('texte');">Afficher le texte</span>
<div id="texte">
texte a afficher
</div>
</body>
Excellente journée -
Salam,
J'ai trouvé une autre solution : on 2 image, quand on clique sur une image le div associe s'affiche, voici le code.
<script type="text/javascript">
function afficher_div(image)
{
switch(image){
case 'image1':
document.getElementById("page1").style.display="block";
document.getElementById("page2").style.display="none";
break;
case 'image2':
document.getElementById("page2").style.display="block";
document.getElementById("page1").style.display="none";
break;
}
}
</script>
<html>
<head>
<body>
<a href="javascript:afficher_div('image1');"><img src="image1.png"></a>
<a href="javascript:afficher_div('image2');"><img src="image2.png"></a>
<div id="page1" style="display:none;" >
<iframe src="1.jpg" width="800" height="600" align="middle"></iframe>
</div>
<div id="page2" style="display:none;" >
<iframe src="2.jpg" width="800" height="600" align="middle"></iframe>
</div>
</body>
</head>
</html>
