affichage de DIV [Résolu]

[JCMANSION]

Bonjour

Je voudrais à partir de boutons rendre visible ou non-visible une DIV
Quand je lance l'appli la DIV n'est pas visible :

Code :

<div id="Texte1" style="visibility:hidden">

Le code de mes boutons :

Code :

1
2
<button id="Lire1" onClick="JavaScript:Lire();">Lire</button>
<button id="Ecouter1" onClick="JavaScript:Ecouter();">Ecouter</button>

Les fonctions :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<!--
function Lire()
{
document.getElementById('Texte1').style.visibility='visible';
}
//-->
<!--
function Ecouter()
{
document.getElementById('Texte1').style.visibility='hidden';
}
//-->

Quand je lance mon appli

J'ai un espace blanc qui représente l'emplacement de ma DIV, donc un grand décalage avec le texte suivant.

Comment je peux rémédier à cela ?
Merci pour vos réponses

[andry.aime]

Bonsoir,

Utilise display:none et display:block pour afficher et cacher ton div.

Code html :

<div id="Texte1" style="display:none">

Code html :

1
2
<input type="button" id="Lire1" onclick="Lire();" value="Lire" />
<input type="button"  id="Ecouter1" onclick="Ecouter();" value="Ecouter" />

Code :

1
2
3
4
5
6
7
8
9
10
function Lire()
{
document.getElementById('Texte1').style.display='block';
}
//-->
<!--
function Ecouter()
{
document.getElementById('Texte1').style.display='none';
}

A+.

[JCMANSION]

Merci pour ce code, cela me convient parfaitement.

J'ai un autre problème je dois appliquer cela à plusieurs DIV : Texte2, Texte3, ect..
Est-il possible d'éviter de créer autant de boutons et de fonctions que de DIV ?

Merci pour ton aide

[andry.aime]

Code :

1
2
3
4
function Lire(id)
{
document.getElementById(id).style.display='block';
}

Code html :

<input type="button" id="Lire1" onclick="Lire('Texte1');" value="Lire" />

[andry.aime]

Mais si une seule bouton pour tout afficher, tu peux faire

Code :

1
2
3
4
5
6
7
function Lire()
{
document.getElementById('Texte1').style.display='block';
document.getElementById('Texte2').style.display='block';
document.getElementById('Texte3').style.display='block';
//........
}

Tu peux aussi utiliser une boucle.

A+.

[JCMANSION]

Merci pour ce code je prends la première solution

Est-il possible d'ajouter dans le click Ecouter

Code :

<audio src="bande_audio.mp3" controls preload></audio>

[JCMANSION]

Est-ce cela le bon code pour rendre non-visible une div et lire un fichier audio
sachant que j'ai div Texte1, Texte2 etc..
et des fichiers Texte1.wav, Texte2.wav etc...

Mon fichier audio :

Code :

<audio src="Texte1.wav" controls preload></audio>

Ma fonction :

Code :

1
2
3
4
5
function Ecouter(id)
{
document.getElementById(id).style.display='none';
document.getElementById(id).play();
}

Mon bouton :

Code :

<input type="button" id="Ecoute1" onclick=Ecouter('Texte1');" value="Ecouter"/>

[Bovino]

Es-tu vraiment sûr d'avoir compris à quoi sert document.getElementById() ?
Si oui, où se trouve l'id Texte1 dans ton code ?