premier pas en javascript
premier pas en javascript - HTML/CSS - Programmation
Marsh Posté le 24-05-2006 à 11:53:34
tu ne peux pas facilement, si tu débutes vraiment en js tu démarres à mon avis un peu fort.
Je crois avoir déjà vu ce script de menu déroulant et de mémoire tu as deux solutions:
- tu fait un setTimer lors du onmouseout de tous tes items du menu, ce setTimer "cache" tous les items ( diplay='none')
- tu mets un div avec un z-index inférieur à celui de ton menu. Sur le onmouseover de ce div, tu caches le menu.
Marsh Posté le 24-05-2006 à 12:06:29
| anapajari a écrit : tu ne peux pas facilement, si tu débutes vraiment en js tu démarres à mon avis un peu fort. |
mon probléme est comment écrire la fonction qui permet d'appeler cette événement
Marsh Posté le 24-05-2006 à 12:14:49
| diarise a écrit : mon probléme est comment écrire la fonction qui permet d'appeler cette événement |
non le problème est exactement le contraire... comment faire pour appeler une fonction sur cet evenement!
Sans les bases toutes les explications qu'on pourra te donner te paraitront plus que floues.
Marsh Posté le 24-05-2006 à 12:18:12
Reply
Marsh Posté le 24-05-2006 à 12:33:57
| diarise a écrit : onmouseover="javascript:cache('smenu1');" |
voici la page en question E:Untitled-1.html
Marsh Posté le 24-05-2006 à 13:28:15
| diarise a écrit : voici la page en question E:Untitled-1.html |
![[:rofl]](https://forum-images.hardware.fr/images/perso/rofl.gif "[:rofl]")
ps: m'en veux pas c'est nerveux
Message édité par anapajari le 24-05-2006 à 13:30:30
Marsh Posté le 24-05-2006 à 13:32:10
detonyle ? max25b ? antho1983 ?
---------------
Posté depuis des chiottes, sales. Me gusta.
Marsh Posté le 24-05-2006 à 13:43:17
au faite comment on peu incérer un fichier dans le fourum pour qu'il soit télécharé.
Marsh Posté le 24-05-2006 à 14:12:53
T'as oublié le anti-slash : "\" ( E:\etc ... )
de rien 
---------------
HAHAHA I M USING TEH INTERNET
Marsh Posté le 24-05-2006 à 14:24:47
| diarise a écrit : au faite comment on peu incérer un fichier dans le fourum pour qu'il soit télécharé. |
code source + copier + coller et tu oublies pas les balises codes autour ...
Mais je continue de dire que tu devrais commencer par apprendre les bases. là ça fait un peu: "Bonjour, je voudrais savoir piloter un avion que j'aurais préalablement construit, j'ai récupéré une aile sur internet maintenant comment je décolle?"
edit pour boulax:
"Slt, kikou asv lol. Jeu ve ça voir pilotait un havion ke jconstrui avent. G trouvé se bou d'ail sur le net, comen que jeu des colle? Merçi lol "
Message édité par anapajari le 24-05-2006 à 14:35:00
Marsh Posté le 24-05-2006 à 14:27:54
fake y'a pas assez de fautes
---------------
Posté depuis des chiottes, sales. Me gusta.
Marsh Posté le 24-05-2006 à 14:55:34
| anapajari a écrit : code source + copier + coller et tu oublies pas les balises codes autour ... |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 259px;
left: 66px;
z-index:100;
width: 905px;
height: 17px;
}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #2F74AB;
border: 1px solid gray;
border-color:#B3B6B0;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
border-color:#B3B6B0;
}
#menu li {
text-align: center;
background: #ffffff;
background:transparent;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 10%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus{
color: #000000;
background-color: #ffffff;
-moz-opacity:0.70; /* Gecko */
filter:alpha(opacity=70); /* IE */
opacity:0.70; /* CSS 3 */
}
#site {
position: absolute;
top : 120px;
left : 5px;
color: #99CC99;
background-color: #FF0000;
padding: 5px;
border: 1px solid gray;
border-color:#B3B6B0;
width: 678px;
z-index: 1;
height: 213px;
}
.Style2 {font-size: 80pt}
.Style3 {
font-size: 6pt;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.Style5 {font-size: 10pt; }
.ar{ width:760px;
height:600px;
background:url(img_ar_pl.gif);
background-position:bottom;
background-repeat:no-repeat;
margin:0px;
}
.Style2 {font-size: 80pt}
.Style3 {font-size: 6pt}
.Style5 {font-size: 10pt; }
#menu { position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 78px;
left: 12px;
z-index:100;
width: 755px;
height: 17px;
}
.Style6{font-size: 10pt; font-family: Geneva, Arial, Helvetica, sans-serif; }
a {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #000000;font-size: 10pt; font-family: Geneva, Arial, Helvetica, sans-serif;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
<!--
function montre(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 montre(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';}
}
//-->
</script>
</head>
<body class="ar">
<table border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="5" height="78"> </td>
<td width="281" valign="top"><img name="" src="images/gfgythyghyt.gif" width="281" height="78" alt="" /></td>
<td width="474"> </td>
</tr>
<tr>
<td height="38"> </td>
<td colspan="2" valign="top"><div id="menu" align="center">
<dl>
<dt onmouseover="javascript:montre();"> <a href="#" title="Retour à l'accueil" class="Style6">Accueil</a> </dt>
</dl>
<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu1');" ><a href="" class="Style6">Production</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#" class="Style6">diarise 1.1</a></li>
<li><a href="#" class="Style6">diarise 1.2</a></li>
<li><a href="#" class="Style6">diarise 1.3</a></li>
<li><a href="#" class="Style6">diarise 1.4</a></li>
<li><a href="#" class="Style6">diarise 1.5</a></li>
<li><a href="#" class="Style6">diarise 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><span class="Style3"><a href="#" class="Style5">Transport</a></span></dt>
<dd id="smenu2">
<ul>
<li><a href="#" class="Style6">diarise 1.1</a></li>
<li><a href="#" class="Style6">diarise 1.2</a></li>
<li><a href="#" class="Style6">diarise 1.3</a></li>
<li><a href="#" class="Style6">diarise 1.4</a></li>
<li><a href="#" class="Style6">diarise 1.5</a></li>
<li><a href="#" class="Style6">diarise 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu3');"><a href="" class="Style6">Commerciale</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#" class="Style6">diarise 3.1</a></li>
<li><a href="#" class="Style6">diarise 3.2</a></li>
<li><a href="#" class="Style6">diarise 3.3</a></li>
<li><a href="#" class="Style6">diarise 3.4</a></li>
<li><a href="#" class="Style6">diarise 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu4');"><a href="" class="Style6">Informations</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#" class="Style6">diarise 4.1</a></li>
<li><a href="#" class="Style6">diarise 4.2</a></li>
<li><a href="#" class="Style6">diarise 4.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu5');"><a href="" class="Style6">Actualités</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#" class="Style6">diarise 1.1</a></li>
<li><a href="#" class="Style6">diarise 1.2</a></li>
<li><a href="#" class="Style6">diarise 1.3</a></li>
<li><a href="#" class="Style6">diarise 1.4</a></li>
<li><a href="#" class="Style6">diarise 1.5</a></li>
<li><a href="#" class="Style6">diarise 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu6');"><a href="#" class="Style6">F A Q </a></dt>
<dd id="smenu6">
<ul>
<li><a href="#" class="Style6">diarise 1.1</a></li>
<li><a href="#" class="Style6">diarise 1.2</a></li>
<li><a href="#" class="Style6">diarise 1.3</a></li>
<li><a href="#" class="Style6">diarise 1.4</a></li>
<li><a href="#" class="Style6">diarise 1.5</a></li>
<li><a href="#" class="Style6">diarise 1.6</a></li>
</ul>
</dd>
</dl>
</div></td>
</tr>
<tr>
<td height="484"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Marsh Posté le 24-05-2006 à 15:06:40
Dans l'ordre:
- abandonne le mode visuel de dreamweaver, il faut que tu commences par apprendre l'html. Ensuite seuleument tu pourras te servir d'outils avancés.
- la mise en page ne doit pas être faite via des tableaux, voir c'est deux excellents articles: openweb et alsacreations
- quand on utilise un script trouvé sur internet, on est censé laisser la trace de son auteur. Un minimum de considération pour le travail qu'il a effectué.
- quand on recopie un script trouvé sur internet, on essaye de le faire correctement. Là ton javascript c'est n'importe quoi, tu as recopié 2 fois la fonction.
- quand on recopie un script trouvé sur internet, on essaye de le comprendre. Le script trouvé devait fonctionner avec un menu à 10 sous-menus, tu n'en as que 6, il serait bon de corriger au moins tes boucles.
Alors maintenant je suis sur que tu dois te dire "Quel relou, moi tout ce que je veux c'est que ça marche..." alors j'espère que tu trouveras un ame courageuse qui te donnera directement le code qui marche, personnelement je pense que ce n'est pas te rendre service.
Marsh Posté le 24-05-2006 à 15:15:07
Reply
Marsh Posté le 24-05-2006 à 15:30:57
c 'est la que je les pris http://css.alsacreations.com/xmedi [...] zontal.htm
Marsh Posté le 24-05-2006 à 15:31:31
et ?
---------------
Posté depuis des chiottes, sales. Me gusta.
Marsh Posté le 24-05-2006 à 15:37:41
| anapajari a écrit : Dans l'ordre:
|
c'est la méme chose la où je les pris http://css.alsacreations.com/xmedi [...] zontal.htm
Marsh Posté le 24-05-2006 à 15:48:34
bin demande leur de leur sur leur forum alors ![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
http://forum.alsacreations.com/lis [...] equot.html
je suis sur qu'ils seront ravis de t'aider et qu'ils maitrisent beaucoup leur bouzin que nous 
Sujets relatifs:
- Delencher du code javascript sur une image
- [Javascript] Menu vertical qui se déroule progressivement
- variable php dans popup javascript
- [javascript][Surement bete] Probleme avec symbole +
- Javascript : Se déplacer vers un signet
- Javascript - Parcours de Dom
- [Javascript] Problèmes de tirets [Résolu]
- Problème de récupération valeur d'un select en javascript avec firefox
- du php au javascript
- [ Javascript ] Mon premier script...
Marsh Posté le 24-05-2006 à 11:37:42
salut je suis un débutant en java script alor mon probléme est la suivante : le menu déroulant reste statique avec l'évenement onmouseover="javascript:montre('smenu1');". je voudrais que le menu retourne en sa phase initial quand la souri quitte la surface du menu déroulant :que dois je faire dans se cas.
merci de votre aide
voici le code :<script type="text/javascript">
<!--
window.onload=montre;
function montre(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';}
}
//-->
</script>
merci qu'en méme