Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] onmouseover

scritch

Par scritch
dans Programmation

 Partager

Messages recommandés

scritch Power Member

scritch

Posté(e)
Posté(e) (modifié)

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é par scritch

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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 :P

scritch Power Member

scritch

Posté(e)
  • Auteur
Posté(e) (modifié)

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é par scritch
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Quelques adresses utiles,

- pour HTML,
,

,

,

- pour C
S
S
,

,

,

,

- pour Java
S
cript,

,

,

- et, incontournable,
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... :P
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)
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...

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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 Power Member

scritch

Posté(e)
  • Auteur
Posté(e)

:P 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

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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 :P

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...