récupération de liens sur un menu par rapport à des id

Bonjour,

J'aurai besoin de vos lumières afin de me débloquer d'un problème.

J'ai un menu avec des balises <a>. Je veux qu'en fonction du <a> sélectionné, j'affiche une partie d'un tableau.

j'ai créé une fonction js :
function showDiv(id){
    if(document.getElementById()=="musique"){
        document.getElementById("musique").style.visibility='visible';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="danse"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'visible';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="comedie"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='visible';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="realisation"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='visible';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="artisanat"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='visible';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="sport"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='visible';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="mode"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='visible';
        document.getElementById("autre").style.visibility='hidden';
    } else if(document.getElementById()=="autre"){
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='visible';
    }
   
}

et dans mes liens de menu j'appelle cette fonction :
<a href="#" onClick="showDiv(musique)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('musique','','img/itf/musique_on.gif',1)"><img src="img/itf/musique_off.gif" name="musique" width="132" height="28" border="0"></a>

j'ai ensuite créer un div pour chaque lien du menu. c'est à dire que je veux qu'il apparaisse uniquement quand on clique sur le lien.
mon div est de cette manière :
<DIV STYLE="visibility:hidden;" ID="musique">
<DIV>


pouvez vous me dire comment faire pour que quand je clique sur tel ou tel lien, ce soit le div correspondant qui s'affiche et pas les autres.?

Merci par avance.


p.s : j'ai 8 liens distincts dans mon menu, et donc 8 div avec des id différents.

Bien le bonjour, y a un peu plus simple pour ta méthode
function showDiv(id) {
          // Cache toutes les div
        document.getElementById("musique").style.visibility='hidden';
        document.getElementById("danse").style.visibility = 'hidden';
        document.getElementById("comedie").style.visibility='hidden';
        document.getElementById("realisation").style.visibility='hidden';
        document.getElementById("artisanat").style.visibility='hidden';
        document.getElementById("sport").style.visibility='hidden';
        document.getElementById("mode").style.visibility='hidden';
        document.getElementById("autre").style.visibility='hidden';
       // montre la div passée en paramètre
       document.getElementById(id).style.visibility='visible';
}

Et après il y a une erreur sur tes balises a, il maque une cote sur showDiv

<a href="#" onClick="showDiv('musique')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('musique','','img/itf/musique_on.gif',1)"><img src="img/itf/musique_off.gif" name="musique" width="132" height="28" border="0"></a>

voilà qui devrait fonctionner je pense

   

[o-_-o]

Merci bien :)
En effet ça fonctionne bien mieux comme ça:)

J'ai encore un souci.

en fait, mon div (il y en a donc 8) est dans une case d'un tableau. mais si par exemple j'appelle le quatrième div, il faudra que je scrolle dans ma page pour que je vois le div affiché puisqu'il n'est que quatrième.

Comment faire pour que même si c'est le quatrième, il s'affiche à la place du premier, et non en bas de page? je veux faire ça pour les 8 div.

Merci d'avance.

Bien le re-bonjour,
le tableau ( contenant les divs ) est - il bien nécessaire ?
Parce qu'en fait en utilisant une classe CSS tu pourrais positionner tes divs en absolutes, ainsi elles apparaîtraient toutes à la même place, du genre :
<style>
    /**
    * Classe utilisée pour positionner les divs
    */
    .DivInfo{
       position:absolute;
       top:10px;
       left:10px;
    }
</style>

<DIV STYLE="visibility:hidden;" ID="musique" class="DivInfo">
<DIV>


Je sais pas si cela réponds à ton problème ou non !
[o-_-o]

Si, ça répond à mon problème mais mon tuteur ne veut pas de div positionné. il veut des tableaux!
ce serait trop simple sinon :)

Bah la il faudrait mettre toutes les divs dans la même cellule du tableau et voilà non ?

Sinon, envois un bout de code ( avec le tableau, le js...)


[o-_-o]

Ben oui, mais c'est déjà ce que j'ai : j'ai déjà tout mis dans la même  cellule de tableau. mais justement, ça va pas!

<tr>
        <td colspan="4">
            <DIV STYLE="visibility:hidden;" ID="musique">
                <table width="527" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td colspan="2" width="525">
                            <img src="img/itf/fleche_orange.gif" width="15" height="11" align="absmiddle">
                            <span class="titresouspartie">ZE KING, 34 ans, Bretagne (--musique)</span>
                        </td>
                        <td width="2"><img src="img/transparent.gif" width="2"></td>
                    </tr>
                    <tr><td><img src="img/transparent.gif" width="3"></td></tr>
                    <tr>
                        <td colspan="2" valign="top">
                            <img src="img/itf/photo_talent_page.jpg" width="136" height="100" hspace="5" vspace="5" align="left">
                            <span class="soustitretalent">Si meliora dies, ut vina, poema reddit, scire velim, chartis pretium quotus arroget annus? Scriptor abhinc annos centum qui decidit, inter perfectos vetersque referri debet an inter vilis atque. Mense vel anno, inter quos referendus erit? Vetesque poetas, an quos et praesens et postera respuat aetas. " Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior ann". </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="vuxfois">
                            24 commentaires
                            <img src="img/itf/separateur_orange.gif" width="2" height="14" align="absmiddle">
                            Vu 250 fois
                        </td>
                        <td class="etoileplume">
                            Les autres talents
                            <img src="img/itf/separateur_orange.gif" width="2" height="14" align="absmiddle">
                            Le top 5
                            <img src="img/itf/separateur_orange.gif" width="2" height="14" align="absmiddle">
                            Les 24 meilleurs de l'ann&eacute;e
                        </td>
                    </tr>   
                </table>
            </DIV>   
            <DIV STYLE="visibility:hidden;" ID="danse">
                <table width="527" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td colspan="2" width="525">
                            <img src="img/itf/fleche_orange.gif" width="15" height="11" align="absmiddle">
                            <span class="titresouspartie">ZE KING, 34 ans, Bretagne (--danse)</span>
                        </td>
                        <td width="2"><img src="img/transparent.gif" width="2"></td>
                    </tr>
                    <tr><td><img src="img/transparent.gif" width="3"></td></tr>
                    <tr>
                        <td colspan="2" valign="top">
                            <img src="img/itf/photo_talent_page.jpg" width="136" height="100" hspace="5" vspace="5" align="left">
                            <span class="soustitretalent">Si meliora dies, ut vina, poema reddit, scire velim, chartis pretium quotus arroget annus? Scriptor abhinc annos centum qui decidit, inter perfectos vetersque referri debet an inter vilis atque. Mense vel anno, inter quos referendus erit? Vetesque poetas, an quos et praesens et postera respuat aetas. " Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior ann". </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="vuxfois">
                            24 commentaires
                            <img src="img/itf/separateur_orange.gif" width="2" height="14" align="absmiddle">
                            Vu 250 fois
                        </td>
                        <td class="etoileplume">
                            Les autres talents
                            <img src="img/itf/separateur_orange.gif" width="2" height="14" align="absmiddle">
                            Le top 5
                            <img src="img/itf/separateur_orange.gif" width="2" height="14" align="absmiddle">
                            Les 24 meilleurs de l'ann&eacute;e
                        </td>
                    </tr>   
                </table>
            </DIV>
    </td>
</tr>

et j'ai 8 div en tout entre les balises <td> et <tr>