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
A voir également:
- Charger le contenu de div en appuyant sur une texte
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Excel cellule couleur si condition texte - Guide
- Mettre un texte en majuscule - Guide
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
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
conseil198
Messages postés
54
Statut
Membre
13
Merci beaucoup, c'est ce que je cherche, je vais l'adapter à mon projet
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>
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>