[Résolu] onmouseover

[scritch]

bonjour

j'aimerai savoir comment faire pour afficher plusieurs menus en même temps ?

J'ai cette fonction :

window.onload=function() {
m();
p();
}

function m(id) {
var d = document.getElementById(id);
for (var i=1; i<=10; i++) {
	if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

function p(id) {
var e = document.getElementById(id);
for (var i=1; i<=10; i++) {
	if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
}
if (e) {e.style.display='block';}
}

 

La page :

<dl class="menu" [b]onMouseOver="m('smenu3');"[/b]>      SECTEURS :
<dt id="smenu3"><a href="VTT_General_Come.html" target="mainFrameVTT">      Cheire du Puy de Côme</a></dt>	
		<dd id="ssmenu1">			
  <a class="ssmenu" href="VTT_Cheire_de_Come_3.html" target="mainFrameVTT">Cheire de Côme 3</a>
  <a class="ssmenu" href="VTT_Cheire_de_Come_4.html" target="mainFrameVTT">Cheire de Côme 4</a>
  <a class="ssmenu" href="VTT_Cheire_de_Come_5.html" target="mainFrameVTT">Cheire de Côme 5</a>
  <a class="ssmenu" href="VTT_Cheire_de_Come_6.html" target="mainFrameVTT">Cheire de Côme 6</a>
  <a class="ssmenu" href="VTT_Cheire_de_Come_7.html" target="mainFrameVTT">Cheire de Côme 7</a>
  <a class="ssmenu" href="VTT_Cheire_de_Come_8.html" target="mainFrameVTT">Cheire de Côme 8</a>
  <a class="ssmenu" href="VTT_Cheire_de_Come_11.html" target="mainFrameVTT">Cheire de Côme 11</a></dd>

<dt id="smenu4"><a href="VTT_General_Puys_Sud.html" target="mainFrameVTT">      Chaîne des Puys Sud</a></dt>
		<dd id="ssmenu2">			
  <a class="ssmenu" href="VTT_Chaine_des_puys_2.html" target="mainFrameVTT">Chaîne des Puys 2</a>
  <a class="ssmenu" href="VTT_Jumes.html" target="mainFrameVTT">Jumes</a>
  <a class="ssmenu" href="VTT_Pulveriere_Sauterre.html" target="mainFrameVTT">pulveriere - Sauterre</a>
  <a class="ssmenu" href="VTT_Vulcania_La_Nugere.html" target="mainFrameVTT">Vulcania - La Nugère</a></dd>

<dt id="smenu5"><a href="VTT_General_Puys_Nord.html" target="mainFrameVTT">      Chaîne des Puys Nord</a></dt>
	<dd id="ssmenu3">			
  <a class="ssmenu" href="VTT_Chaine_des_puys_1.html" target="mainFrameVTT">Chaîne des Puys 1</a>
  <a class="ssmenu" href="VTT_Chaine_des_puys_3.html" target="mainFrameVTT">Chaîne des Puys 3</a>
  <a class="ssmenu" href="VTT_Tour_Du_Pariou.html" target="mainFrameVTT">Tour du Pariou</a>
  <a class="ssmenu" href="VTT_Tour_Du_Puy_De_Dome_1.html" target="mainFrameVTT">Tour du Puy de Dôme 1</a>
  <a class="ssmenu" href="VTT_Tour_Du_Puy_De_Dome_2.html" target="mainFrameVTT">Tour du Puy de Dôme 2</a>
  <a class="ssmenu" href="VTT_Ceyssat_1.html" target="mainFrameVTT">Ceyssat 1</a></li>
  <a class="ssmenu" href="VTT_Durtol_Ternant.html" target="mainFrameVTT">Durtol - Ternant</a></dd>


	<dt id="smenu6"><a href="VTT_General_Divers.html" target="mainFrameVTT">      Divers</a></dt>
			<dd id="ssmenu4">			
  <a class="ssmenu" href="VTT_Sortie_Alix_1.html" target="mainFrameVTT">Sortie Alix 1</a>
  <a class="ssmenu" href="VTT_Sortie_Alix_2.html" target="mainFrameVTT">Sortie Alix 2</a>
  <a class="ssmenu" href="VTT_Viaduc_1.html" target="mainFrameVTT">Viaduc 1</a>
  <a class="ssmenu" href="VTT_Viaduc_2.html" target="mainFrameVTT">Viaduc 2</a></dd>

</dl>

 

Le souci :

c'est le code en gras qui m'embête.

Je voudrai que quand la souris pas sur le mot "secteurs", les menus "smenu3", "smenu4", smenu5", smenu6" s'affichent.

 

dont j'ai essayer des trucs du style

onmouseover="m('smenu3','smenu4',.....);"

mais ça ne marche pas.

 

comment faut il écrire ce code ?

 

Merci pour vos idées

Modifié le 28 mars 2007 par scritch

[Dylav]

Bonjour Scritch,

 

Si j'ai bien compris ta question, tu voudrais que ton ensemble de menus apparaisse lorsque le visiteur fait passer la souris sur le mot SECTEURS. Alors, pourquoi faire compliqué ?

 

Je te propose d'utiliser l'événement onMouseOver, certes, mais en l'appliquant à un paragraphe <p> qui encapsule ta liste de définitions <dl> (n'oublie pas de fermer le paragraphe </p> en fin de liste). Dans ta feuille de style, tu indiques que menu doit être invisible au départ, et au survol du paragraphe (c'est-à-dire du mot SECTEURS), tu demandes à le rendre visible.

 

<html><head>
<style type="text/css">
#menu {visibility:hidden;}
</style>
</head>
<body>
<p onmouseover="document.getElementById('menu').style.visibility = 'visible';">
      SECTEURS :
<dl id="menu">
<dt id="smenu3">...
...</dd>
</dl>
</p>
</body></html>

Ceci dit, tu détournes un peu la notion de glossaire (<dl>, <dt>, <dd>) en l'utilisant pour afficher des menus ! Il serait préférable d'employer la notion de listes ordonnées (<ul>, <li>), quitte à imbriquer des listes

[scritch]

Bonjour et merci.

 

J'ai fais un mélange entre ce que tu m'as dit et ma sauce.

 

J'obtiens ce que je veux.

 

 

Si je n'utilise sans doute pas les balises comme il faut, c'est parce que je découvre tout ça et que ce n'est pas facile de s'y retrouver.

 

Je cherche désespérément une information claire sur les balise HTML, CSS et javascript.

- Soit une liste des balises exhaustives avec leurs fonctions détaillées

- Soit des catégories de chose (menu, cadre, mise en forme du texte ...) avec des balises qui correspondent.

 

Je surf donc sur beaucoup de site (alsacreation, zoneCss, ....) mais j'ai souvent la description d'une balise sans savoir qu'il y en a peut être d'autres plus pertinentes pour faire la même chose.

 

Si tu connais un site ou un ouvrage qui correspond à mes attentes, ça m'interesse.

 

En tout cas, Merci.

 

A+

Christophe

Modifié le 25 mars 2007 par scritch

[Dylav]

Quelques adresses utiles,

- pour HTML,

le

s

s

p

é

cification

s

du W3C

,

leur traduction en Fran

ç

ai

s

,

l'approche du

s

ite

S

ELFHTML

,

- pour C

S

S

,

le

s

s

p

é

cification

s

du W3C

,

leur traduction en Fran

ç

ai

s

,

l'approche

S

ELFHTML

,

- pour Java

S

cript,

le cour

s

chez Developpez.com

,

l'approche

S

ELFHTML

,

- et, incontournable,

Le

S

ite du Z

é

rO

et

s

e

s

tutoriel

s

r

é

put

é

s

(XHTML/C

S

S

, PHP, etc).

Il me semble enfin que je dispose, au bureau, de deux tableaux de référence fort utiles, qui listent respectivement les balises et les attributs HTML. L'avantage, c'est que tout est rassemblé là sous forme synthétique. Mais il va te falloir attendre lundi...

[scritch]

J'attendrai lundi alors.

 

En attendant, je vais regarder tous ces liens.

Merci

[KewlCat]

Je voudrai que quand la souris pas sur le mot "secteurs", les menus "smenu3", "smenu4", smenu5", smenu6" s'affichent.

 

dont j'ai essayer des trucs du style

onmouseover="m('smenu3','smenu4',.....);"

mais ça ne marche pas.

comment faut il écrire ce code ?

Il faut écrire

onmouseover="m('smenu3'); m('smenu4'); m('smenu5'); m('smenu6');"

Tu appelles autant de fois ta fonction que tu as d'éléments à faire afficher...

[Dylav]

Bonjour,

 

Comme promis, je suis allé consulter ma liste de liens au bureau. J'ai retrouvé les deux pages que j'évoquais hier. Si elles sont effectivement précieuses, tu risques néanmoins d'être un peu déçu. Il s'agit en effet de deux annexes aux spécifications HTML 4.01 du W3C,

- l'index des éléments (balises) HTML,

- l'index des attributs.

 

L'avantage, c'est que c'est bourré de liens hypertexte vers les spécifications elles-mêmes. L'inconvénient, c'est que c'est quand même extrêmement technique, donc un peu abscons (et en anglais, c'est plus dur).

 

A tout hasard, deux autres liens dont j'ai dû me servir peu ou prou,

- Tutoriel XHTML, apprendre à créer des pages simplement

- CSS débutant

[scritch]

Super,

 

Vous avez tous deux exactement répondu à mes questions.

 

Pour kewlcat, c'est exactement ce que je cherchais à faire. Je le saurai pour la prochaine fois puisque j'ai fais autrement ce coup ci.

 

Pour dylav: c'est aussi parfait et je ne suis pas déçu du tout. Je connais maintenant toutes les balises qui existent. Il reste un peu de travaille à faire pour savoir à quoi elles servent mais c'est le minimum que je puisse faire.

 

Merci à vous deux

 

christophe

[Dylav]

Si dans l'immédiat tu considères ton problème comme résolu, n'oublie pas de l'indiquer en ajoutant à son titre le mot [Résolu], ce qui ne t'empêchera pas de créer ici d'autres sujets au détour des difficultés que tu rencontreras.

 

Pour modifier le titre de ton topic, tu édites ton premier post