Lancer une fonction javascript sur un clic dans une balise <td>

Version imprimable

Bonjour,
Je ne maîtrise pas du tout l'imbrication de javascript dans du html, et j'aurais aimé savoir comment, dans ce bout d'html, je pouvais lancer la fonction javascript editer_sous_menu(menu[0],0) sur un clic dans la balise <td>
Code:

1 2 3 4 5 <td width=154 height=38 align="left" bgcolor=#FFFFFF onMouseOver=this.style.background='#FFFFFF editer_sous_menu(menu[0],0) onMouseOut=this.style.background='#FFFFFF> <a align="left" onMouseOver="editer_sous_menu(menu[0],0)" href=# class=ejsmenu> <font style=font-size:1em FACE="Arial"">L'Association</font> </a> </td>
Merci
Cordialement
Zakuli

salut, tu avais presque la solution, tu as juste des problèmes de concaténation (quottes/guillemets)

Code:

1
2
3
4
5
<td width="154" height="38" align="left" bgcolor="#FFFFFF" onMouseOver="this.style.background='#FFFFFF'; editer_sous_menu(menu[0],0)" onMouseOut="this.style.background='#FFFFFF';">
    <a align="left"  onMouseOver="editer_sous_menu(menu[0],0)" href="#" class="ejsmenu">
           <font style="font-size:1em FACE='Arial'">L'Association</font>
    </a>
</td>

10/02/2021, 11h38
zakuli

Merci Doksuri pour ta correction, mais il me manque encore comment y ajouter la possibilité de lancer la fonction "editer_sous_menu(menu[0],0)" par un clic souris
10/02/2021, 11h51
Doksuri

pardon

comme tu as les onMouseOut/onMouseOver, tu peux mettre un onclick="editer_sous_menu(menu[0],0)"
10/02/2021, 16h29
zakuli

Merci Doksuri,

J'ai bien ajouté ce que tu proposes, mais pour l'instant ça ne marche pas !

Cordialement
Zakuli
10/02/2021, 16h47
javatwister

Citation:

Envoyé par zakuli

ça ne marche pas

Bonjour!

Pas très sympa de répondre ça, comme si tu attendais un miracle :weird:

1) Message d'erreur dans la console?
2) Pas d'effet sur le clic?
3) Effet attendu par la fonction appelée?

Javatwister, je ne vois pas bien où tu me trouves agressif, c'était juste une constatation. Mais si j'ai offensé Doksuri, je le prie de m'en excuser, ce n'était absolument pas mon idée !!

Ben oui, bien sûr, j'attends un miracle, c'est bien ce qui se passe quand un membre apporte la solution à un NOB comme moi, non ?
Et pour ce qui est du NOB, vous allez être servi, celui ci est vraiment à la ramasse, je ne sais même pas me servir de la console, je n'y connais quasiment rien à javascript, encore moins en CSS, un peu à HTML et moyen pour PHP.

Alors si vous voulez laisser tomber, non, je ne vous en voudrai pas !

Voila ce que je trouve dans la partie du code source JavaScript concerné :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 document.write('<TR>') dw='<TD WIDTH=154 HEIGHT=38 '; dw=dw+'ALIGN=\"left\" bgcolor='+couleur_lien_fond; dw=dw+' onMouseOver='this.style.background=+couleur_lien_fond_hover; dw=dw+' editer_sous_menu(menu[0],0)'; dw=dw+' onMouseOut=this.style.background=\''+couleur_lien_fond+'>'; dw=dw+'<A align=\"left\" '; dw=dw+' onMouseOver="editer_sous_menu(menu[0],0)"'; dw=dw+' CLASS=ejsmenu>'; dw=dw+'<FONT style=font-size:1em FACE=\"Arial\"\">'; dw=dw+'L\'Association</FONT>'; dw=dw+'</A></TD>'; document.write(dw);
Ce code qui m'a été installé sur le site il y a quelques années par un ami, fonctionne très bien sur mon site, mais pas sur un smartphone car si la souris ne vient pas survoler le menu, le sous menu ne se déroule pas, d'où mon besoin d'y insérer un onclick qui devrait permettre de présenter le sous menu si le visiteur clique dessus sur le smartphone.

Encore toutes mes excuses à Doksuri
Cordialement

10/02/2021, 19h25
javatwister

Ouh là! Loin de moi l'envie de déclencher des drames...
Simplement, "ça ne marche pas" est un peu tabou ici parce que, en général, ça ne permet pas de faire avancer le schmilblick;

1) Tu as peut-être inséré dans un endroit imprévu le morceau de code "onclick";
2) Peut-être ferais-tu mieux de poster toute ta source, qu'on comprenne mieux la gestion de la page;
3) Le code que tu donnes est effectivement un peu obsolète :P et mériterait un soin intégral, pour le bien-être de ton site 8-)

Ouh là aussi, mon site est en fait une plateforme développée en PHP, pour des associations peu argentées qui me permet de leur mettre à disposition un site internet en quelques heures et pour une adhésion minime qui va de 10 à 50€ selon leur richesse.
Le script de base fait quelques 20.000 lignes de PHP, avec le moins de javascript possible et le moins de CSS dedans, mais ça, tu sais pourquoi ! Une base de données me permet de paramétrer chaque site.

Tu peux trouver deux exemples de site : www.armor-vietnam.com ou www.collectifvietnam.com.

Donc te passer le code entier me semble un peu utopique.

Mon problème ici sont les menus qui fonctionnent très bien sur PC, car quand la souris survol le menu, le sous menu se déroule sans problème, mais il ne fonctionnent pas sur un smartphone, car le survol n'existe pas vraiment sur smartphone. Je pensais, bêtement sans doute, qu'en ajoutant une réponse à un clic sur le menu pour faire dérouler le sous menus, ce serait facile, mais !!!

Bon puisque tu veux la source, je t'ai sélectionné ici la part de code visant à éditer les menus, j'espère que tu vas pouvoir t'en sortir :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<script language="JavaScript" type="text/JavaScript">
menu_abscisse_orig = <?php echo $menu_x_left; ?>;
menu_ordonnee_orig = <?php if (($_SESSION['page_ent']=="o" && $art_ent == "o")) { echo $_SESSION['menu_y_top']; } else { echo "0"; } ?>;
couleur_text='#<?php echo $_SESSION['lien_nav'][LIEN]; ?>';
couleur_text_hover='#<?php echo $_SESSION['lien_nav'][LIEN_HOVER]; ?>';
couleur_lien_fond=<?php if ($_SESSION['lien_nav'][LIEN_FOND] == null) { echo "#FFFFFF"; } else { echo "'#".$_SESSION['lien_nav'][LIEN_FOND]."'"; } ?>;
couleur_lien_fond_hover=<?php if ($_SESSION['lien_nav'][LIEN_FOND_HOVER] == null) { echo "#FFFFFF"; } else { echo "'#".$_SESSION['lien_nav'][LIEN_FOND_HOVER]."'"; } ?>;
couleur_bord='#<?php echo $_SESSION['lien_nav'][LIEN_BORD_COULEUR]; ?>';
document.write('<style type="text/css">');
document.write('.sousmenu { position: absolute; visibility: hidden; z-index:10; }')
document.write('#topgauche { opacity:1; position:absolute; top:'+menu_ordonnee_orig+'px; left:'+menu_abscisse_orig+'px; z-index:10}')
document.write('A.ejsmenu {color:'+couleur_text+'; text-decoration:none; background-color:'+couleur_lien_fond+'; }')
document.write('A:visited.ejsmenu {color:'+couleur_text+'; text-decoration:none; background-color:'+couleur_lien_fond+'; }') //Couleur des menus quand ond passe dessus
document.write('A:hover.ejsmenu {color:'+couleur_text_hover+'; font-weight:bold; background-color:'+couleur_lien_fond+'; }') //Couleur des menus quand ond passe dessus
document.write('A:active.ejsmenu {color:'+couleur_text+'; text-decoration:none; background-color:'+couleur_lien_fond+'; }') //Couleur des menus quand ond passe dessus*/
document.write('</style>');
document.write('<DIV class=sousmenu id=topdeck></DIV>');
 
/* LIENS */
 
menu = new Array;
 
<?php
//********************************************* Sous Menu
//************************ 1-Initialisation des Array menu[]
$m = 0;         //Compteur Menus
$mn = 0;        //Compteurs menus édités
while   ($m < count($mEnt))
{       if ($mFct[$m] && $mHab[$m])
        {
                echo "menu[$mn] = new Array;\n";
                $mn++;
        }
        $m++;
}
 
//************************ 2-Chargement des Array menu[]
 
$m = 0;         //Compteur Menus
$mn = 0;        //Compteurs menus édités
$s = 0;         //Compteur Sous Menus
 
while ($m < count($mEnt))
{       if ($mFct[$m])
        {       if ($mHab[$m])
                {       $s = 0;         //Compteur Sous Menus
                        $sn = 0;        //Compteur Sous Menus édités
                        if (isset($mLib[$m])) //s'il existe des sous menu
                        {       while ($s < count($mLib[$m]))
                                {       if ($mAut[$m][$s] && $mFon[$m][$s])
                                        {       if (($_SESSION['asso']==8) || ($_SESSION['asso']==3) || ($_SESSION['asso']==6) || ($_SESSION['asso']==1))
                                                                { ?>menu[<?php echo $mn; ?>][<?php echo $sn; ?>] = "<A HREF=<?php echo $_SESSION['asso_url']."/".$mPag[$m][$s]; ?> CLASS=ejsmenu><?php echo $mLib[$m][$s]; ?></A>";<?php }
                                                else    { ?>menu[<?php echo $mn; ?>][<?php echo $sn; ?>] = "<A HREF=\"<?php echo "http://www.taigas.com"."/".$mPag[$m][$s]; ?>\" CLASS=ejsmenu><?php echo $mLib[$m][$s]; ?></A>";<?php }
                                                $sn++;
                                        }
                                        echo "\n";
                                        $s++;
                                }
                        }
                        $mn++;
                }
        }
        $m++;
}
 
//******************************   Edition des Sous Menus
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { item_sous_menu = document.topdeck }
else if (dom) { item_sous_menu = document.getElementById("topdeck").style }
else if (iex) { item_sous_menu = topdeck.style }
item_sous_menu.top = menu_ordonnee_orig+ <?php echo $hauteur_entete_menu + 2 * $_SESSION['menu_bordure_px']; ?>;
 
function editer_sous_menu(menu_libelle,decallage_sous_menu) //Edition des sous menus : menu_libellé array des sous-menus, décallage_sous_menu : position horizontale des sous menu (1er menu = 0, Nème => N*$largeur_entete_menu)
{       item_sous_menu.visibility = "hidden";
        a=true
        item_sous_menu.left = menu_abscisse_orig+decallage_sous_menu; //position horizontale des sous menu (décallage_sous_menu : 1er menu = 0, Nème => N*$largeur_entete_menu
        var ligne_html ="<table border=0 cellpadding=0 cellspacing=0 bgcolor="+couleur_bord+" width=<?php echo $largeur_sous_menu."px"; ?>><tr><td><table width=100% border=<?php echo $_SESSION['smenu_bordure_px']; ?>px cellpadding=1 cellspacing=0>";
        numero_sous_menu = 0
        while (numero_sous_menu < menu_libelle.length) //menu_libellé.length = Nb d'item de l'array menu_libellé = nb de sous menus
        {       ligne_html += "<tr><td bgcolor="+couleur_lien_fond;
                ligne_html += " onMouseOver=\"this.style.background='"+couleur_lien_fond_hover;
                ligne_html += "'\" onMouseOut=\"this.style.background='"+couleur_lien_fond;
                ligne_html += "'\" height=10>";
                ligne_html += "<p   align=\"<?php echo $_SESSION['smenu_pos']; ?>\"><font style=<?php echo $style_smenu; ?>>";
                ligne_html += "&nbsp;&nbsp;"+menu_libelle[numero_sous_menu]+"</font></p></td></tr>";
                numero_sous_menu++;
        }
        ligne_html += "</table></td></tr></table>";
        if (nava)
        {
                item_sous_menu.document.write(ligne_html);
                item_sous_menu.document.close();
                item_sous_menu.visibility = "visible";
        }
        else if (dom)
        {
          document.getElementById("topdeck").innerHTML = ligne_html;
          item_sous_menu.visibility = "visible";
        }
        else if (iex)
        {
          document.all("topdeck").innerHTML = ligne_html;
          item_sous_menu.visibility = "visible";
        }
}
 
 
function effacer_sous_menu()
{
        item_sous_menu.visibility = "hidden";
}
 
 
document.onclick = effacer_sous_menu;
document.write('<DIV ID=topgauche>') /*nécessaire pour que le menu apparaisse au dessus du slider */
document.write('<TABLE ALIGN=left BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=<?php echo count($mEnt)*$largeur_entete_menu; ?>>')
document.write('<TR>')
document.write('<TD>')
document.write('<TABLE CELLPADING=0 CELLSPACING=0 BORDER=<?php echo $_SESSION['menu_bordure_px']; ?>px BORDERCOLOR='+couleur_bord+'>')
document.write('<TR>')
 
<?php
 
/*********************** Edition des menus ***********************/
$i=0;
$mn=0;
while ($i < (count($mEnt)))
{       if ($mFct[$i] && $mHab[$i])
        {       if ( $mn*$largeur_entete_menu + $largeur_sous_menu > $_SESSION['fen_larg']) //si oui le menu déborde de l'écran
                                { $pos_smenu = $_SESSION['fen_larg'] - $largeur_sous_menu ; } //Si on ne veut pas que le sous-menu déborde
                else    { $pos_smenu = $mn*$largeur_entete_menu; }
                dw='<TD WIDTH=<?php echo $largeur_entete_menu; ?> HEIGHT=<?php echo $hauteur_entete_menu; ?> ';
                dw=dw+'ALIGN=\"<?php echo $_SESSION['menu_pos']; ?>\" bgcolor='+couleur_lien_fond;
                dw=dw+' onMouseOver=this.style.background=\''+couleur_lien_fond_hover;
                dw=dw+' editer_sous_menu(menu[<?php echo $mn; ?>],<?php echo $pos_smenu; ?>)';
                dw=dw+' onMouseOut=this.style.background=\''+couleur_lien_fond+'>';
                dw=dw+'<A align=\"<?php echo $_SESSION['menu_pos']; ?>\" ';
                dw=dw+' onMouseOver="editer_sous_menu(menu[<?php echo $mn; ?>],<?php echo $pos_smenu; ?>)"';
                dw=dw+' <?php   if ($_SESSION['mEntMenu'][$mn]=="Sans") //si un lien existe sur l'entête de menu 
                                                                                                                { echo "onclik()=return(false) href=#"; }       //pas de lien
                                                elseif (($_SESSION['asso']==8) || ($_SESSION['asso']==3) || ($_SESSION['asso']==6) || ($_SESSION['asso']==1))
                                                                { echo "href=".$_SESSION['asso_url']."/".$_SESSION['mEntMenu'][$mn]; }
                                                else    { echo "href=\"".$_SESSION['mEntMenu'][$mn]."\""; } // lien vers la page demandée ?>
                                CLASS=ejsmenu>';
                dw=dw+'<FONT style=<?php echo $style_menu ?>\">';
                dw=dw+'<?php echo $mEnt[$i]; ?></FONT>';
                dw=dw+'</A></TD>';
                //alert('dw'+dw)
                document.write(dw);
                <?php
                $mn++;
        }
        $i++;
}       ?>
 
document.write('</TR></TABLE></TD></TR></TABLE></DIV>')
</script>

11/02/2021, 11h50
NoSmoking

Bonjour,
pas grand chose à voir avec ton soucis mais que viennent faire tous ces document.write dans un fichier PHP !??!

Pour ton soucis sur le menu, le mieux est d'abord de le refaire avant d’aller plus loin.
11/02/2021, 12h13
javatwister

Un bien joli site, ma foi!
Mais le code a été tellement mis à jour de manière cumulative depuis 20 ans qu'il ressemble à un ... euh... une grande braderie.

Bref, où as-tu ajouté le "onclick"? Sur un malentendu, ça peut marcher...

PS: fais quand même un F12, histoire de découvrir les erreurs dans la console.
12/02/2021, 15h42
zakuli

Bonjour NoSmoking,

La partie menu, c'est la seule que je n'ai pas écrite, elle est là quasiment depuis le début et je n'y ai touché que pour faire l'interface avec la base de données de paramétrage du site.

Pour te faire une idée des possibilités du paramétrage, tu peux aller voir aussi deux sites, dont les propriétaires n'ont pas voulu en moderniser l'apparence : www.lesamisdessentiers.com et rance-mekong-garonne.taigas.com. En plus, chaque site peux avoir plusieurs apparences différentes.

Donc revenons en à ta question "pourquoi tout ces document.write". Effectivement dans la première partie où ils apparaissent, il ne servent à rien et, maintenant que j'en connais un tout petit peu plus sur Javascipt, le paramétrage aurait pu être passé d'une autre manière et les seuls utiles sont ceux qui apparaissent à la fin, encore qu'il aurait été possible d'écrire ça avec deux lignes seulement ! Mais ces deux là, il est à mon avis impossible de s'en passer, non ?

Cordialement
Zakuli
12/02/2021, 16h04
zakuli

Bonjour javatwister,

Je ne sais plus qui c'était, mais lorsque j'ai vu les post hier, il m'a semblé que l'un de vous me conseillait de refaire totalement le site. C'est vrai qu'il a été bidouillé tellement de fois que c'est bien un de mes objectifs que de le reprendre complètement ! Mais avant de m'y atteler, je voulais que le site actuel fonctionne correctement et donc sur smartphone également.

Le onclick devait, me semble-t-il, être ajouté lors de la constitution des menus, i.e. lignes 136 ou 140 en utilisant le editer_sous_menu(menu[<?php echo $mn; ?>],<?php echo $pos_smenu; ?>) qui est censé déroulé les sous menus.

Cordialement
Zakuli
PS : je vais tenter de regarder ce que me dit la console, mais en général, vu mon niveau de webmestre, je n'en tire que rarement des informations que je puisse traiter !