Page HTML
Résolu/Fermé
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
-
22 juin 2009 à 19:24
samgunsjovirow Messages postés 40849 Date d'inscription samedi 3 mai 2008 Statut Modérateur Dernière intervention 17 février 2023 - 1 juil. 2009 à 20:40
samgunsjovirow Messages postés 40849 Date d'inscription samedi 3 mai 2008 Statut Modérateur Dernière intervention 17 février 2023 - 1 juil. 2009 à 20:40
A voir également:
- Page HTML
- Supprimer une page word - Guide
- Editeur html - Télécharger - HTML
- Traduire une page - Guide
- Word numéro de page 1/2 - Guide
- Page d'accueil iphone - Guide
11 réponses
samgunsjovirow
Messages postés
40849
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 035
22 juin 2009 à 19:27
22 juin 2009 à 19:27
Il faut utilser des calques et des comportements. Ca te dit quelquechose ou tu veux plus d'explications?
Si oui, dis nous déjà sur quoi tu travailles: un logiciel ou simplement notepad?
Si oui, dis nous déjà sur quoi tu travailles: un logiciel ou simplement notepad?
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
22 juin 2009 à 19:46
22 juin 2009 à 19:46
Oui j'aimerais un peu plus d'explication. En fait je travaille avec Dreamweaver et le bloc note .
samgunsjovirow
Messages postés
40849
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 035
22 juin 2009 à 20:01
22 juin 2009 à 20:01
Bon alors pour t'expliquer la procédure, tu dois d'abord créér tes calques (les menus qui apparaissent quand tu passes la souris quelquepart), ensuite tu ajouteras les comportements.
Dans dreamweaver, tu vas dans Insertion> Calque. Là ça te mettra un calque que tu peux paramétrer: lui donner un nom, changer la couleur de fond, le déplacer, etc... Mets le calque sous le mot ou l'image que la souris doit survoler et insère ton sous-menu à l'intérieur. Répète cette opération pour chaque calque de sous menu.
Une fois que tous tes claques sont prets, va sur la première image qui doit faire apparaitre le premier sous menu. Si tu n'as pas l'onglet "comportements" deja ouvert, tu peux le faire apparaitre en faisant maj + F3, ou en allant dans le menu "Fenetre".
Séléctionne ta première image, et dans l'onglet comportements, clique sur le + et choisis "afficher ou masquer les calques". Là tu devrais avoir la liste de tous tes calques. Tu mets "afficher" pour le sous-menu concerné et masquer pour les autres. Il faut aussi que dans évènements, tu sélectionne "onMouseOver". Si tu as autre chose d'ecrit sous evenements, fais un clique de droit dessus et tu pourras en changer.
Dans dreamweaver, tu vas dans Insertion> Calque. Là ça te mettra un calque que tu peux paramétrer: lui donner un nom, changer la couleur de fond, le déplacer, etc... Mets le calque sous le mot ou l'image que la souris doit survoler et insère ton sous-menu à l'intérieur. Répète cette opération pour chaque calque de sous menu.
Une fois que tous tes claques sont prets, va sur la première image qui doit faire apparaitre le premier sous menu. Si tu n'as pas l'onglet "comportements" deja ouvert, tu peux le faire apparaitre en faisant maj + F3, ou en allant dans le menu "Fenetre".
Séléctionne ta première image, et dans l'onglet comportements, clique sur le + et choisis "afficher ou masquer les calques". Là tu devrais avoir la liste de tous tes calques. Tu mets "afficher" pour le sous-menu concerné et masquer pour les autres. Il faut aussi que dans évènements, tu sélectionne "onMouseOver". Si tu as autre chose d'ecrit sous evenements, fais un clique de droit dessus et tu pourras en changer.
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
22 juin 2009 à 20:08
22 juin 2009 à 20:08
Ok . Merci beaucoup !
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
22 juin 2009 à 21:56
22 juin 2009 à 21:56
Euh en fait quand je le fait, les sous-menu ne s'affichent pas quand je survol le mot : les sous-menu sont affichés comme des mots normaux enfin je ne sais pas si tu vois ce que je veux dire...
samgunsjovirow
Messages postés
40849
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 035
22 juin 2009 à 22:20
22 juin 2009 à 22:20
Tu pourrais copier et coller le code HTML de ta page? Par contre je ne pourrais peut etre te donner une explication que demain car je vais bientot déconnecter.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
23 juin 2009 à 17:43
23 juin 2009 à 17:43
Voila le code :
<html>
<head>
<title>Ma page HTML</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 10px;
top: 39px;
background-color: #FF0000;
}
.Style1 {color: #FFFFFF}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
mon titre
<div id="Layer1" onMouseOver="MM_showHideLayers('Layer1','','show')">
<p class="Style1">sous menu 1 </p>
<p class="Style1">sous menu 2 </p>
</div>
</body>
</html>
<html>
<head>
<title>Ma page HTML</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 10px;
top: 39px;
background-color: #FF0000;
}
.Style1 {color: #FFFFFF}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
mon titre
<div id="Layer1" onMouseOver="MM_showHideLayers('Layer1','','show')">
<p class="Style1">sous menu 1 </p>
<p class="Style1">sous menu 2 </p>
</div>
</body>
</html>
samgunsjovirow
Messages postés
40849
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 035
23 juin 2009 à 18:39
23 juin 2009 à 18:39
Merci pour le code. Déjà j'ai remarqué qu'il tu as mal fait la partie sur les comportements.Cela . C'est bien sur le titre que tu dois placer le comportement, pas sur le calque (ce qui est le cas dans le code que tu as envoyé). Je jeteraois un coup d'oeil au code pour voir si il y a autre chose à faire et je te tiens au courant
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
23 juin 2009 à 18:43
23 juin 2009 à 18:43
Ok merci.
samgunsjovirow
Messages postés
40849
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 035
24 juin 2009 à 22:23
24 juin 2009 à 22:23
Coucou me revoilà (1000 excuses pour le retard, j'étais occupée).
Enfin bref...Ma méthode ma.rche mieux avec une image.
Donc j'ai remplacé le texte "mon titre" par un bouton. Sur ce bouton, j'ai appliqué un comportement afficher -masquer les calques, et sur le calque, j'ai appliqué un comportement "masquer le calque" (comme ça quand la sousis sort du sous-menu, il disparait.
Voici ce que ça donne en code
Enfin bref...Ma méthode ma.rche mieux avec une image.
Donc j'ai remplacé le texte "mon titre" par un bouton. Sur ce bouton, j'ai appliqué un comportement afficher -masquer les calques, et sur le calque, j'ai appliqué un comportement "masquer le calque" (comme ça quand la sousis sort du sous-menu, il disparait.
Voici ce que ça donne en code
<html>
<head>
<title>Ma page HTML</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 10px;
top: 39px;
background-color: #FF0000;
}
.Style1 {color: #FFFFFF}
-->
</style>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<img src="bouton.jpg" width="100" height="50" onMouseOut="MM_showHideLayers('Layer1','','hide')" onMouseOver="MM_showHideLayers('Layer1','','show')">
<div id="Layer1" style="visibility: hidden; left: 19px; top: 59px" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<p class="Style1">sous menu 1 </p>
<p class="Style1">sous menu 2 </p>
</div>
</body>
</html>
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
1 juil. 2009 à 16:21
1 juil. 2009 à 16:21
Vraiment merci beaucoup mais il reste un problème : quand je veux cliquer sur un sous menu, le calque disparait...
Coucou,
Ce que tu aurais pu faire aussi, c'est une recherche de scripts de menus sous google. Pas mal de sites te proposent des codes de sources, et entre autres des codes sources de menus... Des verticaux, horizontaux, en roue etc ...
Après si tu cherches à te former, ok c'est bien de faire par toi-même, mais à rien ne sert de réinventer la roue !! ;)
Voilà, bonne continuation,
CTPC
Ce que tu aurais pu faire aussi, c'est une recherche de scripts de menus sous google. Pas mal de sites te proposent des codes de sources, et entre autres des codes sources de menus... Des verticaux, horizontaux, en roue etc ...
Après si tu cherches à te former, ok c'est bien de faire par toi-même, mais à rien ne sert de réinventer la roue !! ;)
Voilà, bonne continuation,
CTPC
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
1 juil. 2009 à 17:58
1 juil. 2009 à 17:58
Merci pour ton conseil.
LeY2A
Messages postés
39
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2011
2
1 juil. 2009 à 18:59
1 juil. 2009 à 18:59
Ah, enfin j'ai réussi, il suffisait simplement de mettre le comportement masquer le calque et mettre "onMouseOut" sur le calque.
Vraiment merci pour vos conseils car ils m'on vraiment bien aidé.
LeY2A
Vraiment merci pour vos conseils car ils m'on vraiment bien aidé.
LeY2A
samgunsjovirow
Messages postés
40849
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 035
1 juil. 2009 à 20:40
1 juil. 2009 à 20:40
Ah oui en effet j'avais oublié celui ci...désolée si je t'ai embrouillé mais ça faisait longtemps que j'en avais pas utilisé donc j'ai essayé de tout faire de mémoire, LOL. Contente que ça marche en tous cas!
