Charger le contenu de div en appuyant sur une texte
Résolu/Fermé
conseil198
Messages postés
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
-
6 févr. 2014 à 11:34
Naj - 3 août 2016 à 16:25
Naj - 3 août 2016 à 16:25
A voir également:
- Charger le contenu de div en appuyant sur une texte
- Mettre un texte en majuscule - Guide
- Word a trouvé du contenu illisible - Guide
- Transcription audio en texte word gratuit - Guide
- Transcrire une vidéo youtube en texte - Guide
- Excel cellule couleur si condition texte - Guide
2 réponses
stgcici
Messages postés
51
Date d'inscription
mardi 29 octobre 2013
Statut
Membre
Dernière intervention
18 février 2014
1
6 févr. 2014 à 12:15
6 févr. 2014 à 12:15
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
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
13
6 févr. 2014 à 12:58
6 févr. 2014 à 12:58
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>
stgcici
Messages postés
51
Date d'inscription
mardi 29 octobre 2013
Statut
Membre
Dernière intervention
18 février 2014
1
6 févr. 2014 à 14:00
6 févr. 2014 à 14:00
ok.
c'est bien.
A+
c'est bien.
A+
6 févr. 2014 à 12:20