Menu escamotable en javascript

Bonjour,

Je suis toujours en train de préparer ma migration vers spip 1.9.1 et j'en profite pour remettre tout aux normes du W3C.
Mon site avait été conçu au départ par un administrateur qui avait choisi de négliger les autres navigateurs qu' Internet Explorer. Il avait donc créé des menus escamotables utilisant des méthodes et propriétés que seul Microsoft reconnaît.

J'aimerais beaucoup modifier ce code pour qu'il fonctionne avec, au moins, tous les navigateurs récents. Voici ce dont il s'agit :

J'ai cette fonction dans un fichier placé entre les balises <head></head> avec INCLURE(inc-javascript.html):

<script language="javascript">

if(document.images)
  {
    Open = new Image(16,13);
    Closed = new Image(16,13);
    Open.src ="images/open.gif";
    Closed.src ="images/closed.gif";
  }
}

function showhide(what,what2)
{
  if (what.style.display=='none')
  {
    what.style.display='';
    what2.src="images/open.gif";
  }
  else
  {
    what.style.display='none';
    what2.src="images/closed.gif";
  }
}
</script>

et dans un squelette inc-menu j'ai ça :

    <span onClick="showhide(menu1outline, menu1sign)" style="cursor:hand; font-Family:Verdana;">
    <!--Partie toujours visible du menu-->
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBox">
          <!--Partie Gauche avec une flèche (image) modifiée quand on ouvre le sous-menu -->
          <img src="images/open.gif" id="menu1sign" valign="bottom" alt="Cliquez pour développer le menu" title="Cliquez pour développer le menu">
        </TD>
        <TD class="TE_menuTitre">L'association
          <!--Partie droite cliquable avec un lien simple vers un article-->
          <!--<a href="articleX.html">Texte du lien</a>-->
        </TD>
      </TR>
    </TABLE>
    </span>
    <!--Partie escamotable du menu-->
    <span id="menu1outline" style="display:">
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBoxSub" width="10">&nbsp;</TD>
        <TD class="TE_menuSub">
          <BOUCLE_A(ARTICLES) {id_article=X} {par titre}{inverse}>
          <a href="#URL_ARTICLE" title="bla bla">Titre de l'article</a>
        </TD>
        </BOUCLE_A>
      </TR>
    </TABLE>
    (....)
    </span>

Ce script marche très bien dans Internet Explorer mais pas du tout dans Firefox

J'ai tenté ceci:

function ouvrirfermer(sousmenu,image)
{
  if(document.getElementById)
  {
    if (document.getElementById(sousmenu).style.visibility=="hidden")
    {
    document.getElementById(sousmenu).style.visibility="visible";
    document.getElementById(image).src="images/open.gif";
    }
    else
    }
    document.getElementById(sousmenu).style.visibility="hidden";
    document.getElementById(image).src="images/close.gif";
    {
  }
}

et dans le squelette inc-menu j'ai mis ça :

    <span id=MenuAssociation">
    <!--Partie toujours visible du menu-->
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBox">
          <!--Partie Gauche avec une flèche (image) modifiée quand on ouvre le sous-menu -->
          <a href="#" onClick="ouvrirfermer(SousMenuAssociation,menu1fleche)"><img src="images/open.gif" id="menu1fleche" valign="bottom" alt="Cliquez pour développer le menu" title="Cliquez pour développer le menu"></a>
        </TD>
        <TD class="TE_menuTitre">
          <a href="articleX.html" onClick="ouvrirfermer(SousMenuAssociation,menu1fleche)" title="Cliquez pour développer le menu">Texte du lien</a>
        </TD>
      </TR>
    </TABLE>
    </span>
    <!--Partie escamotable du menu-->
    <span id="SousMenuAssociation">
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBoxSub" width="10">&nbsp;</TD>
        <TD class="TE_menuSub">
          <BOUCLE_A(ARTICLES) {id_article=X} {par titre}{inverse}>
          <a href="#URL_ARTICLE" title="bla bla">Titre de l'article</a>
        </TD>
        </BOUCLE_A>
      </TR>
    </TABLE>
    (....)
    </span>

Et ça ne marche pas! Ni dans IE ni dans Firefox. Y a t'il un expert en Javascript qui puisse me dire ce qui ne va pas dans ce code? Il doit manquer quelque chose mais quoi??

Bonne soirée et merci de votre attention.

--
Reynald Beaufort
turquieeuropeenne@club.fr

Turquie Européenne
http://www.turquieeuropeenne.org

IL y a de bonnes contribs pour ce genre de menus dans spip-contrib, dont une qui fonctionne sans javascript pour FF et un script minimal pour IE6 (pas testé IE7)

BMR

Turquie Européenne a écrit :

Bonjour,

Je suis toujours en train de préparer ma migration vers spip 1.9.1 et j'en profite pour remettre tout aux normes du W3C.
Mon site avait été conçu au départ par un administrateur qui avait choisi de négliger les autres navigateurs qu' Internet Explorer. Il avait donc créé des menus escamotables utilisant des méthodes et propriétés que seul Microsoft reconnaît.

J'aimerais beaucoup modifier ce code pour qu'il fonctionne avec, au moins, tous les navigateurs récents. Voici ce dont il s'agit :

J'ai cette fonction dans un fichier placé entre les balises <head></head> avec INCLURE(inc-javascript.html):

<script language="javascript">

if(document.images)
  {
    Open = new Image(16,13);
    Closed = new Image(16,13);
    Open.src ="images/open.gif";
    Closed.src ="images/closed.gif";
  }
}

function showhide(what,what2)
{
  if (what.style.display=='none')
  {
    what.style.display='';
    what2.src="images/open.gif";
  }
  else
  {
    what.style.display='none';
    what2.src="images/closed.gif";
  }
}
</script>

et dans un squelette inc-menu j'ai ça :

    <span onClick="showhide(menu1outline, menu1sign)" style="cursor:hand; font-Family:Verdana;">
    <!--Partie toujours visible du menu-->
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBox">
          <!--Partie Gauche avec une flèche (image) modifiée quand on ouvre le sous-menu -->
          <img src="images/open.gif" id="menu1sign" valign="bottom" alt="Cliquez pour développer le menu" title="Cliquez pour développer le menu">
        </TD>
        <TD class="TE_menuTitre">L'association
          <!--Partie droite cliquable avec un lien simple vers un article-->
          <!--<a href="articleX.html">Texte du lien</a>-->
        </TD>
      </TR>
    </TABLE>
    </span>
    <!--Partie escamotable du menu-->
    <span id="menu1outline" style="display:">
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBoxSub" width="10">&nbsp;</TD>
        <TD class="TE_menuSub">
          <BOUCLE_A(ARTICLES) {id_article=X} {par titre}{inverse}>
          <a href="#URL_ARTICLE" title="bla bla">Titre de l'article</a>
        </TD>
        </BOUCLE_A>
      </TR>
    </TABLE>
    (....)
    </span>

Ce script marche très bien dans Internet Explorer mais pas du tout dans Firefox

J'ai tenté ceci:

function ouvrirfermer(sousmenu,image)
{
  if(document.getElementById)
  {
    if (document.getElementById(sousmenu).style.visibility=="hidden")
    {
    document.getElementById(sousmenu).style.visibility="visible";
    document.getElementById(image).src="images/open.gif";
    }
    else
    }
    document.getElementById(sousmenu).style.visibility="hidden";
    document.getElementById(image).src="images/close.gif";
    {
  }
}

et dans le squelette inc-menu j'ai mis ça :

    <span id=MenuAssociation">
    <!--Partie toujours visible du menu-->
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBox">
          <!--Partie Gauche avec une flèche (image) modifiée quand on ouvre le sous-menu -->
          <a href="#" onClick="ouvrirfermer(SousMenuAssociation,menu1fleche)"><img src="images/open.gif" id="menu1fleche" valign="bottom" alt="Cliquez pour développer le menu" title="Cliquez pour développer le menu"></a>
        </TD>
        <TD class="TE_menuTitre">
          <a href="articleX.html" onClick="ouvrirfermer(SousMenuAssociation,menu1fleche)" title="Cliquez pour développer le menu">Texte du lien</a>
        </TD>
      </TR>
    </TABLE>
    </span>
    <!--Partie escamotable du menu-->
    <span id="SousMenuAssociation">
    <TABLE width="170" cellpadding="0" cellspacing="1" border="0">
      <TR>
        <TD class="TE_menuBoxSub" width="10">&nbsp;</TD>
        <TD class="TE_menuSub">
          <BOUCLE_A(ARTICLES) {id_article=X} {par titre}{inverse}>
          <a href="#URL_ARTICLE" title="bla bla">Titre de l'article</a>
        </TD>
        </BOUCLE_A>
      </TR>
    </TABLE>
    (....)
    </span>

Et ça ne marche pas! Ni dans IE ni dans Firefox. Y a t'il un expert en Javascript qui puisse me dire ce qui ne va pas dans ce code? Il doit manquer quelque chose mais quoi??

Bonne soirée et merci de votre attention.

Le 27/12/06, Turquie Européenne

Il doit exister de bons groupes de discussions sur le javascript
Tu peux regarder http://css.alsacreations.com/search.php?q=menu&s=OK
pour les menus.
Là où il y a des <li> tu peux mettre tes boucles.

--
@plus

Jacques

Améliorer OutlookExpress:http://www.aminautes.org/forums/configurer/oe/QF_doc.html

Où placer sa réponse ?
[Mini-FAQ] Repondre par courrier ou dans les news ?