[JS] (rollover) comment afficher un calque pendant n secondes ????

comment afficher un calque pendant n secondes ???? [JS] (rollover) - HTML/CSS - Programmation

Marsh Posté le 20-12-2002 à 19:05:46    

Lus all,
 
chui débutant, et en train de monter un rollover en js.
j ai reussi a faire en sorte que lorsqu'on passe sur une image, un menu correspondant s affiche dans un calque.
 
ce que j aimerais faire maintenant, c que ce menu se masque au bout de 5 secondes par ex si la personne ne fait rien, ou si elle va sur un autre objet qui declenche l apparition d'un autre masque.
 
j'ai pas trouvé la balise (ou la ruse) pour ce comportement.
 
merci d avance, c urgent.


Message édité par Profil supprimé le 20-12-2002 à 19:22:28
Reply

Marsh Posté le 20-12-2002 à 19:05:46   

Reply

Marsh Posté le 20-12-2002 à 20:05:38    

budweiser a écrit :

j ai reussi a faire en sorte que lorsqu'on passe sur une image, un menu correspondant s affiche dans un calque.

tu récupères sûrement ton calque avec :
 
var calque = document.getElementById('nomDuCalque';);
 
pour le cacher, il faut changer sa propriété css display à none :
 
calque.style.display = 'none';
 
setTimeout() est une fonction js qui prend en argument une commande et le temps à attendre (en millisecondes) avant de l'éxécuter, donc
 
setTimeout("calque.style.display = 'none'", 5000);

Reply

Marsh Posté le 20-12-2002 à 21:38:22    

je suis super ravi que tu me repondes mais ca va un peu vite
je suis ultra debutant
je monte mes scripts avec dremanwaever, avec lequel je bosse a la fois en graphique et avec le code pour mieu saisir...
 
en fait mes calques sont cachés.
 
et c un Onmouseover qui les fait apparaitre en passant sur les images.
 
je comprend donc pas ou je dois placer le  
setTimeout("calque.style.display = 'none'", 5000);
 

Reply

Marsh Posté le 20-12-2002 à 21:43:46    

je ne connais pas dreamweaver. tu as moyen de mettre ta page qq part sur le net ?

Reply

Marsh Posté le 20-12-2002 à 21:48:24    

ca roule (c vraiment sympa)
bouge po

Reply

Marsh Posté le 20-12-2002 à 21:52:58    

voilà
 
http://membres.lycos.fr/chimouche/test/navig.htm
 
je t ai foutu la page
(dessus n apparait que le menu sur lekel je bosse)
 
je n ai laissé que les scripts d apparition des calques.
 
me reste juste a definir un temps donné (genre 3 sec d apparation)
 
et le fait qu ils se masquent si on clique ailleurs.
 
a tout de suite  :jap:  :jap:  :)

Reply

Marsh Posté le 20-12-2002 à 22:19:40    

tu as donc le code d'apparition lorsque la souris est sur la balise (mouse over) :
 
onMouseOver="MM_showHideLayers('ClubLayer','','show';)"  
 
lorsque la souris quitte (mouse out), tu remplace le paramètre 'show' par 'hide' pour le cacher :
 
onMouseOut="MM_showHideLayers('ClubLayer','','show';)"  
 
pour mettre un délai, tu utilises setTimeout comme indiqué plus haut : le même code, le délai en ms :
 
onmouseout="setTimeout('MM_showHideLayers(\'ClubLayer\',\'\',\'hide\';)', 5000)"
 
pour que le menu se cache sans avoir à enlever la souris, tu le mets directement dans onmouseover :
 
onMouseOver="MM_showHideLayers('ClubLayer','','show';); setTimeout('MM_showHideLayers(\'ClubLayer\',\'\',\'hide\';)', 5000)"  
 
si la souris va sur un autre élément du menu, il faut que tu caches tous les autres menus possiblement ouverts. tu recopies le code de fermeture pour tous les layers :
 
onMouseOver="MM_showHideLayers('ClubLayer','','show';); MM_showHideLayers('CompetitionLayer','','hide';); .... et tous les autres layers à fermer"  
 
etc.
 
tout ça c'est _extrèmement_ chiant. tu risques d'avoir pas mal d'emmerdes avec les timers & co. comme tu débutes, concentre-toi plutôt sur le _contenu_ de ton site.


Message édité par youdontcare le 20-12-2002 à 22:20:21
Reply

Marsh Posté le 20-12-2002 à 22:31:13    

merci bcp c tres precis comme reponse.
 
a vrai dire, le contenu de mon site est deja pret.
j avais articulé tout ca avec des frames, mais je trouvais ca chiant et tout le monde me les deconseillais.
 
j en suis donc arrivé la, et uen idée de menu comme celle que tu as vu, qui se placera au centre de mon header graphique, les pages evoluant en dessous.
 
tu me dis que ca va etre compliqué, si j insere comme tu me le dis ca ne va pas fonctionner ? (kitte a prendre le temps)

Reply

Marsh Posté le 20-12-2002 à 22:37:13    

>> a vrai dire, le contenu de mon site est deja pret.
 
tant mieux ;)
 
>> j avais articulé tout ca avec des frames, mais je trouvais ca chiant et tout le monde me les deconseillais.
 
yep, très souvent frames = mal.
 
>> tu me dis que ca va etre compliqué, si j insere comme tu me le dis ca ne va pas fonctionner ? (kitte a prendre le temps)
 
si, ça va rouler, mais c'est chiant à faire et chiant à maintenir. et il y a un petit bug sournois : si tu passes la souris sur le menu, il sera désactivé dans les 5 secondes quoiqu'il arrive. quitte pendant 2 secondes, reviens dessus tout de suite, il reste 3 secondes avant qu'il disparaisse. bref, le genre de code casse-couilles et qui n'apporte pas grand chose.

Reply

Marsh Posté le 20-12-2002 à 22:39:56    

la je viens t inclure tes codes mais ca marche pas.
 
je me retrouve avec cette ligne pour le texte CLUB par ex
 
onMouseOver="MM_showHideLayers('ClubLayer','','show';); setTimeout('MM_showHideLayers('ClubLayer','','hide';)', 5000" onMouseOut="setTimeout('MM_showHideLayers('ClubLayer','','hide';)',5000)">Club</div></td>
 
mais le truc ne se barre pas  :sweat:

Reply

Marsh Posté le 20-12-2002 à 22:39:56   

Reply

Marsh Posté le 20-12-2002 à 22:43:49    

youdontcare a écrit :

>>
 

Citation :

si, ça va rouler, mais c'est chiant à faire et chiant à maintenir. et il y a un petit bug sournois : si tu passes la souris sur le menu, il sera désactivé dans les 5 secondes quoiqu'il arrive. quitte pendant 2 secondes, reviens dessus tout de suite, il reste 3 secondes avant qu'il disparaisse. bref, le genre de code casse-couilles et qui n'apporte pas grand chose.


 
ok en effet, c peut etre un peu compliqué sans etre forcement utile je vois.
 
dans ce cas je devrais peut etre me concentrer sur le fait que tous les autres calques se cachent quand j en demasque un autre...?
je vais me mettre la dessus que le truc fonctionne. je verrais apres si je fous un chrono ou pas.

Reply

Marsh Posté le 20-12-2002 à 22:46:39    

copiecolle ... tout caractère est là pour une raison :
 

youdontcare a écrit :

onmouseout="setTimeout('MM_showHideLayers(\'ClubLayer\',\'\',\'hide\';)', 5000)"


 
lorsque le navigateur détecte le onmouseout, il va lire le code contenu entre guillemets ("..." ) ou apostrophes("..." ). de même, le setTimeout va lire le code qu'on lui passe en premier paramètre :  
 
MM_showHideLayers('ClubLayer','','hide';)"  
 
qu'on doit également mettre entre guillemets ou apostrophes. si tu écris juste
 
onmouseout="setTimeout('MM_showHideLayers('ClubLayer','','hide';)', 5000)"
 
setTimeout va croire que le code qu'on lui passe s'arrête à la seconde apostrophe :
 
'MM_showHideLayers('
 
soit pas grand chose. pour cela on met un \ devant qui lui dit de considérer l'apostrophe comme un caractère de la chaîne et non pas un caractère terminateur.
 
si tu ne suis pas, copie colle !

Reply

Marsh Posté le 20-12-2002 à 22:55:38    

merci bcp
j avais juste a copier je me compliquais la vie a trier pardon
 
la je me suis mis sur le fait qu il degage tous les autres calques...
 
apres je me remet sur le settimeout  ;)  
 
merci encore  :jap:  :jap:  :jap:

Reply

Marsh Posté le 20-12-2002 à 23:17:47    

c encore moi... :ange:  
 
j ai toujours un ti probleme
 
http://membres.lycos.fr/chimouche/test/navig.htm  
 
si tu mattes bien, quand j inclue ton code, bah y a plus rien marche (je parle pour le menu CLUB)
clublayer s affiche pas
ca ne degage meme pas les autres calques.
 
c encore mon code qu a un prob ?

Reply

Marsh Posté le 21-12-2002 à 06:55:28    

chez moi ça marche ... tu as corrigé depuis ton message ?

Reply

Marsh Posté le 21-12-2002 à 10:32:38    

:hello:  
 
ouai j'ai corrigé.
en fait ca marche bien.
par contre, je ne me suis pas attardé sur le settimeout sur lequel je me remettrais plus tard, apres avoir testé la navig  ;)  
 
a bientot. merci encore  :jap:  
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed