[URGENT]Javascript
Résolu
lirycs78
Messages postés
106
Statut
Membre
-
lirycs78 Messages postés 106 Statut Membre -
lirycs78 Messages postés 106 Statut Membre -
bonsoir,
Voila j'ai un code qui ce présente comme ceci :
<table id="Tableau_01" width="250" height="350" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="images/organisation_10.gif" width="230" height="40" alt="" onclick="javascript:visibilite('comite_directeur');">
</td>
</tr>
</table>
<div id="comite_directeur" align="center" style="display:none;"><b><font color="White">Comite Directeur</font></b><br><br>
<a href="index.php?page=comite_directeur"><b>Voir Le Comité Directeur</b></a>
</div>
et j'en ai plusieur comme sa sur la méme page, il s'agit d'un organigramme a chak click sur une image un texte en desous s'affiche.
Le probléme est : Si je clique sur une image puis sur une autre, le texte de la premiére image ne disparait pas et ce rajoute donc au texte de la deuxiéme image. Comment faire pour que quand je clique sur une autre image le texte de l'ancienne s'efface automatiquement ?
MERCI DE VOTRE AIDE..
Voila j'ai un code qui ce présente comme ceci :
<table id="Tableau_01" width="250" height="350" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="images/organisation_10.gif" width="230" height="40" alt="" onclick="javascript:visibilite('comite_directeur');">
</td>
</tr>
</table>
<div id="comite_directeur" align="center" style="display:none;"><b><font color="White">Comite Directeur</font></b><br><br>
<a href="index.php?page=comite_directeur"><b>Voir Le Comité Directeur</b></a>
</div>
et j'en ai plusieur comme sa sur la méme page, il s'agit d'un organigramme a chak click sur une image un texte en desous s'affiche.
Le probléme est : Si je clique sur une image puis sur une autre, le texte de la premiére image ne disparait pas et ce rajoute donc au texte de la deuxiéme image. Comment faire pour que quand je clique sur une autre image le texte de l'ancienne s'efface automatiquement ?
MERCI DE VOTRE AIDE..
A voir également:
- [URGENT]Javascript
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
9 réponses
met ta fonction javascript ici pour qu'on puisse la corriger, et met aussi le code ou on voit 2 images à cliquer
Voila code js :
<script type="text/javascript">
function visibilite (thingId)
{
var targetElement;
targetElement = document.getElementById(thingId);
if (targetElement.style.display == "none")
{
targetElement.style.display="";
}
else
{
targetElement.style.display="none" ;
}
}
</script>
<script type="text/javascript">
function visibilite (thingId)
{
var targetElement;
targetElement = document.getElementById(thingId);
if (targetElement.style.display == "none")
{
targetElement.style.display="";
}
else
{
targetElement.style.display="none" ;
}
}
</script>
Une autre question : est-ce que chaque image à son propre div dans sa partie inférieure pour afficher son texte,
ou est-ce que c'est une seule div commune pour toutes les images ?
ou est-ce que c'est une seule div commune pour toutes les images ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Voici la solution (fait copier-coller tout le code:):
<html>
<head>
</head>
<body>
<!-- Page : index.php ou il y a le script -->
<script type="text/javascript">
function visibilite (id)
{
numero=id.substring(7);
for(n=0;n<=7;n++)
{
if(n==numero)
{
obj=document.getElementById("idTexte"+n);
obj.style.display="block";
}
else if(n!=numero)
{
obj=document.getElementById("idTexte"+n);
obj.style.display="none";
}
}
}
</script>
<!-- PAGE : organisation.html (l'organigramme) -->
<table id="Tableau_01" width="250" height="350" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="3">
<img src="images/organisation_01.gif" width="250" height="4" alt=""></td>
</tr>
<tr>
<td rowspan="16">
<img src="images/organisation_02.gif" width="10" height="346" alt=""></td>
<td>
<img src="images/organisation_03.gif" width="230" height="40" alt="" id='idImage0' onclick="javascript:visibilite(id);"></td>
<td rowspan="16">
<img src="images/organisation_04.gif" width="10" height="346" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_05.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_06.gif" width="230" height="40" alt="" id='idImage1' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_07.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_08.gif" width="230" height="40" alt="" id='idImage2' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_09.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_10.gif" width="230" height="40" alt="" id='idImage3' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_11.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_12.gif" width="230" height="40" alt="" id='idImage4' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_13.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_14.gif" width="230" height="40" alt="" id='idImage5' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_15.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_16.gif" width="230" height="40" alt="" id='idImage6' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_17.gif" width="230" height="5" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_18.gif" width="230" height="21" alt="" id='idImage7' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_19.gif" width="230" height="4" alt=""></td>
</tr>
</table>
<div id="idTexte2" align="center" style="display:none;">
<b><font color="White">Afrique</font></b><br>
<b>Président :</b> Elhadji Ndour Malick<br>
<b>Vice Président :</b> Madouni Houcine<br>
<b><font color="White">Europe</font></b><br>
<b>Président :</b> Marc Lamberti<br>
<b><font color="White">Asie</font></b><br>
<b>Président :</b> Dai Bui Van<br>
</div>
<div id="idTexte0" align="center" style="display:none;"><b><font color="White">Comite Directeur</font></b><br><br>
<a href="index.php?page=comite_directeur"><b>Voir Le Comité Directeur</b></a>
</div>
<div id="idTexte1" align="center" style="display:none;"><b><font color="White">Direction Technique</font></b><br><br>
<a href="index.php?page=direction_technique"><b>Voir La Direction Technique</b></a>
</div>
<div id="idTexte5" align="center" style="display:none;"><b><font color="White">Pays Membres</font></b><br><br>
<a href="index.php?page=pays_membres"><b>Voir Les Pays Membres</b></a>
</div>
<div id="idTexte4" align="center" style="display:none;">
<b><font color="White">Algérie :</font> Madouni Houcine</b><br>
<b><font color="White">France :</font> Dai Bui Van</b><br>
</div>
<div id="idTexte7" align="center" style="display:none;"><b><font color="White">Clubs</font></b><br><br>
<a href="index.php?page=Clubs"><b>Voir Le Comité Directeur</b></a>
</div>
<div id="idTexte3" align="center" style="display:none;"><b><font color="White">Secrétariat</font></b><br><br>
<a href="index.php?page=Clubs"><b>Voir Le Secrétariat</b></a>
</div>
<div id="idTexte6" align="center" style="display:none;"><b><font color="White">Départements</font></b><br><br>
<a href="index.php?page=Clubs"><b>Voir Les Départements</b></a>
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<!-- Page : index.php ou il y a le script -->
<script type="text/javascript">
function visibilite (id)
{
numero=id.substring(7);
for(n=0;n<=7;n++)
{
if(n==numero)
{
obj=document.getElementById("idTexte"+n);
obj.style.display="block";
}
else if(n!=numero)
{
obj=document.getElementById("idTexte"+n);
obj.style.display="none";
}
}
}
</script>
<!-- PAGE : organisation.html (l'organigramme) -->
<table id="Tableau_01" width="250" height="350" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="3">
<img src="images/organisation_01.gif" width="250" height="4" alt=""></td>
</tr>
<tr>
<td rowspan="16">
<img src="images/organisation_02.gif" width="10" height="346" alt=""></td>
<td>
<img src="images/organisation_03.gif" width="230" height="40" alt="" id='idImage0' onclick="javascript:visibilite(id);"></td>
<td rowspan="16">
<img src="images/organisation_04.gif" width="10" height="346" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_05.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_06.gif" width="230" height="40" alt="" id='idImage1' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_07.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_08.gif" width="230" height="40" alt="" id='idImage2' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_09.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_10.gif" width="230" height="40" alt="" id='idImage3' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_11.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_12.gif" width="230" height="40" alt="" id='idImage4' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_13.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_14.gif" width="230" height="40" alt="" id='idImage5' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_15.gif" width="230" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_16.gif" width="230" height="40" alt="" id='idImage6' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_17.gif" width="230" height="5" alt=""></td>
</tr>
<tr>
<td>
<img src="images/organisation_18.gif" width="230" height="21" alt="" id='idImage7' onclick="javascript:visibilite(id);"></td>
</tr>
<tr>
<td>
<img src="images/organisation_19.gif" width="230" height="4" alt=""></td>
</tr>
</table>
<div id="idTexte2" align="center" style="display:none;">
<b><font color="White">Afrique</font></b><br>
<b>Président :</b> Elhadji Ndour Malick<br>
<b>Vice Président :</b> Madouni Houcine<br>
<b><font color="White">Europe</font></b><br>
<b>Président :</b> Marc Lamberti<br>
<b><font color="White">Asie</font></b><br>
<b>Président :</b> Dai Bui Van<br>
</div>
<div id="idTexte0" align="center" style="display:none;"><b><font color="White">Comite Directeur</font></b><br><br>
<a href="index.php?page=comite_directeur"><b>Voir Le Comité Directeur</b></a>
</div>
<div id="idTexte1" align="center" style="display:none;"><b><font color="White">Direction Technique</font></b><br><br>
<a href="index.php?page=direction_technique"><b>Voir La Direction Technique</b></a>
</div>
<div id="idTexte5" align="center" style="display:none;"><b><font color="White">Pays Membres</font></b><br><br>
<a href="index.php?page=pays_membres"><b>Voir Les Pays Membres</b></a>
</div>
<div id="idTexte4" align="center" style="display:none;">
<b><font color="White">Algérie :</font> Madouni Houcine</b><br>
<b><font color="White">France :</font> Dai Bui Van</b><br>
</div>
<div id="idTexte7" align="center" style="display:none;"><b><font color="White">Clubs</font></b><br><br>
<a href="index.php?page=Clubs"><b>Voir Le Comité Directeur</b></a>
</div>
<div id="idTexte3" align="center" style="display:none;"><b><font color="White">Secrétariat</font></b><br><br>
<a href="index.php?page=Clubs"><b>Voir Le Secrétariat</b></a>
</div>
<div id="idTexte6" align="center" style="display:none;"><b><font color="White">Départements</font></b><br><br>
<a href="index.php?page=Clubs"><b>Voir Les Départements</b></a>
</div>
</body>
</html>