Javascript - Menu dynamique en fonction de la position du curseur sur celui-ci
Résolu
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
-
5 avril 2009 à 14:01
sebastiengoret Messages postés 13 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 8 avril 2009 - 7 avril 2009 à 14:39
sebastiengoret Messages postés 13 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 8 avril 2009 - 7 avril 2009 à 14:39
A voir également:
- Javascript - Menu dynamique en fonction de la position du curseur sur celui-ci
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Javascript poo - Conseils pratiques -Javascript
- Curseur sql - Conseils pratiques -SQL
- Base de données javascript - Conseils pratiques -Javascript
- Position lettre alphabet - Forum Visual Basic
12 réponses
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
16
5 avril 2009 à 14:38
5 avril 2009 à 14:38
Bonjour,
>>J'espère avoir été le plus clair possible dans mes explications
parfaitement
>>et avoir une réponse correcte de votre part...
pas de problème : qu'est-ce qui plante dans ce que tu fais ?
tu as des messages d'erreurs ? avec tous les navigateurs ?
avec tous les OS ?
que te disent les debuggueurs ?
Cordialement [mon Site] [M'écrire] Bul
>>J'espère avoir été le plus clair possible dans mes explications
parfaitement
>>et avoir une réponse correcte de votre part...
pas de problème : qu'est-ce qui plante dans ce que tu fais ?
tu as des messages d'erreurs ? avec tous les navigateurs ?
avec tous les OS ?
que te disent les debuggueurs ?
Cordialement [mon Site] [M'écrire] Bul
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
6 avril 2009 à 11:37
6 avril 2009 à 11:37
Salut Bul3,
Je vais peut-être te décevoir, mais je ne suis pas un AS en JavaScript, je découvre ce langage (pour mon TFE).
En réalité, je cherche si il y a une fonction qui me permettrait de déplacer les images. J'ai trouver quelques codes sur google, j ai essayer de les modifier pour mon site, mais rien ne fonctionne correctement...
Je vais insérer une image du site (sur photoshop) pour t expliquer un peu mieux ce que je recherche...
A bientôt, merci à tous.
Sébus La Brutus
Je vais peut-être te décevoir, mais je ne suis pas un AS en JavaScript, je découvre ce langage (pour mon TFE).
En réalité, je cherche si il y a une fonction qui me permettrait de déplacer les images. J'ai trouver quelques codes sur google, j ai essayer de les modifier pour mon site, mais rien ne fonctionne correctement...
Je vais insérer une image du site (sur photoshop) pour t expliquer un peu mieux ce que je recherche...
A bientôt, merci à tous.
Sébus La Brutus
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
16
6 avril 2009 à 11:45
6 avril 2009 à 11:45
>>rien ne fonctionne correctement...
soit tu n'as pas pris un script qui fonctionne,
soit ce que tu fais/appliques/modifies n'est pas correct
>>si il y a une fonction qui me permettrait de déplacer les images
plein, plein, et pas qu'une image : n'importe quel élément
je te dirais bien and drop&s=javascriptfr.com clique donc ici, mais tu
nous dis que rien ne fonctionne...
@+
soit tu n'as pas pris un script qui fonctionne,
soit ce que tu fais/appliques/modifies n'est pas correct
>>si il y a une fonction qui me permettrait de déplacer les images
plein, plein, et pas qu'une image : n'importe quel élément
je te dirais bien and drop&s=javascriptfr.com clique donc ici, mais tu
nous dis que rien ne fonctionne...
@+
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
6 avril 2009 à 12:05
6 avril 2009 à 12:05
je t envoie le code de la ou j'ai reussi à aboutir avec mes recherches....
<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<SCRIPT LANGUAGE=JavaScript>
function position(e)
{ x (navigator.appName.substring(0,3) "Net") ? e.pageX : event.x+document.body.scrollLeft; y (navigator.appName.substring(0,3) "Net") ? e.pageY : event.y+document.body.scrollTop;
window.status = "Souris X:"+x+" / Y:"+y;
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;
</script><noscript>compteur live</noscript>
<marquee id="scroller" scrollamount="5" direction="up" bgcolor="#ffffff"
"javascript:"onmouseover="javascript:scroller.start()" onmouseout="javascript:scroller.stop()">
</marquee>
</HTML>
Le problème c que je dois passer au moins une fois sur le menu avant qu'il réagisse a la commande onmouseout="javascript:scroller.stop()".
Deuxiement, comment puis-je faire pour que le menu move en fonction de la position du curseur sur le div id="navigation"???
Sébus La Brutus
<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<SCRIPT LANGUAGE=JavaScript>
function position(e)
{ x (navigator.appName.substring(0,3) "Net") ? e.pageX : event.x+document.body.scrollLeft; y (navigator.appName.substring(0,3) "Net") ? e.pageY : event.y+document.body.scrollTop;
window.status = "Souris X:"+x+" / Y:"+y;
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;
</script><noscript>compteur live</noscript>
<marquee id="scroller" scrollamount="5" direction="up" bgcolor="#ffffff"
"javascript:"onmouseover="javascript:scroller.start()" onmouseout="javascript:scroller.stop()">
</marquee>
</HTML>
Le problème c que je dois passer au moins une fois sur le menu avant qu'il réagisse a la commande onmouseout="javascript:scroller.stop()".
Deuxiement, comment puis-je faire pour que le menu move en fonction de la position du curseur sur le div id="navigation"???
Sébus La Brutus
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
16
6 avril 2009 à 12:33
6 avril 2009 à 12:33
c'est ce que tu appelles déplacer des images ?
ce que tu nous montre c'est la balise marquee
qui fait un affichage, un défilement d' images
>>je dois passer au moins une fois sur le menu avant qu'il réagisse a la commande onmouseout="javascript:scroller.stop()".
ben oui !
onmouseover c'est quand on quitte le survol de l'élément,
donc tant que tu ne l'as pas survolé on ne quitte pas le survol
en général d'ailleurs on fait exactement le contraire : on stoppe au survol !
mais bon,
rien ne t'empêches d'appeler cette fonction qui stoppe au chargement
de la page
>>if(navigator.appName.substring(0,3) == "Net")
>> document.captureEvents(Event.MOUSEMOVE);
>>document.onmousemove = position;
totalement obsolète ça, et FF doit te le dire !
ensuite, c'est bien beau de noter où est le curseur,
mais comme tu n'en fais rien, rien ne se passe bien entendu
et alors, ce <marquee>, dans un <table>, lui même dans un
... ???
on se demande bien à quoi et à qui ça peut servir....
ce que tu nous montre c'est la balise marquee
qui fait un affichage, un défilement d' images
>>je dois passer au moins une fois sur le menu avant qu'il réagisse a la commande onmouseout="javascript:scroller.stop()".
ben oui !
onmouseover c'est quand on quitte le survol de l'élément,
donc tant que tu ne l'as pas survolé on ne quitte pas le survol
en général d'ailleurs on fait exactement le contraire : on stoppe au survol !
mais bon,
rien ne t'empêches d'appeler cette fonction qui stoppe au chargement
de la page
>>if(navigator.appName.substring(0,3) == "Net")
>> document.captureEvents(Event.MOUSEMOVE);
>>document.onmousemove = position;
totalement obsolète ça, et FF doit te le dire !
ensuite, c'est bien beau de noter où est le curseur,
mais comme tu n'en fais rien, rien ne se passe bien entendu
et alors, ce <marquee>, dans un <table>, lui même dans un
... ???
on se demande bien à quoi et à qui ça peut servir....
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
16
6 avril 2009 à 12:36
6 avril 2009 à 12:36
onmouseover c'est quand on quitte le survol de l'élément,
il fallait bien entendu lire :
onmouseout c'est quand on quitte le survol de l'élément,
il fallait bien entendu lire :
onmouseout c'est quand on quitte le survol de l'élément,
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
6 avril 2009 à 13:09
6 avril 2009 à 13:09
Ecoute je suis novice en javascript, j essaye avec les differentes reponses que j obtient d'en faire quelques choses de raisonnable... Par rapport à ce que je comprend...
Tu essaye de m apporter de l aide, mais tu critique plus ce que je fais, plutot que de me conseiller par rapport a mes questions. Je ne suis p e pas très clair par rapport à mes questions... Mais dit le moi ke tu comprend rien à ce que je dis, et j essayerai d etre plus clair...
Sébus La Brutus
Tu essaye de m apporter de l aide, mais tu critique plus ce que je fais, plutot que de me conseiller par rapport a mes questions. Je ne suis p e pas très clair par rapport à mes questions... Mais dit le moi ke tu comprend rien à ce que je dis, et j essayerai d etre plus clair...
Sébus La Brutus
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
7 avril 2009 à 14:29
7 avril 2009 à 14:29
Re- bien le bonjour , la suite de la réponse (merde, je me comprends même plus)
est-ce que c'est ça que tu veux ?
<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
<style>
#navigation{
width:50px;
height:200px;
overflow:hidden;
border:1px solid black;
}
</style>
<SCRIPT LANGUAGE=JavaScript>
function position (_ev){
var _elem = (document.all)? event.srcElement: _ev.target;
var _posY = (document.all)? event.pageY : _ev.pageY;
while (_elem.id.toUpperCase() != "NAVIGATION"){
_elem = _elem.parentNode;
}
var _mediumHeight = (_elem.clientHeight/2);
var _sens = ( _posY >_mediumHeight) ? "up": "down";
document.getElementById("scroller").setAttribute("direction", _sens);
}
function stopDefil(){
document.getElementById("scroller").stop();
}
function startDefil(){
document.getElementById("scroller").start();
}
window.onload=function(){
}
</script>
</HEAD>
<marquee id="scroller" scrollamount="5" direction="up" bgcolor="#ffffff"
</marquee>
</HTML>
??? la balise marquee c'est un peu trop vieux pour moi qui ne suis plus tout jeune mais l'adaptation à ta dernière réponse ne devrait pas te poser trop de souci !
il suffit d'entourer tes images par une div ayant un id différent et de faire du setTimeout mais vu que j'ai un poil de boulot je n'aurais hélas moins de temps pour me détendre.... ;o)
[o-_-o]
est-ce que c'est ça que tu veux ?
<HTML>
<HEAD>
<TITLE>Votre titre</TITLE>
<style>
#navigation{
width:50px;
height:200px;
overflow:hidden;
border:1px solid black;
}
</style>
<SCRIPT LANGUAGE=JavaScript>
function position (_ev){
var _elem = (document.all)? event.srcElement: _ev.target;
var _posY = (document.all)? event.pageY : _ev.pageY;
while (_elem.id.toUpperCase() != "NAVIGATION"){
_elem = _elem.parentNode;
}
var _mediumHeight = (_elem.clientHeight/2);
var _sens = ( _posY >_mediumHeight) ? "up": "down";
document.getElementById("scroller").setAttribute("direction", _sens);
}
function stopDefil(){
document.getElementById("scroller").stop();
}
function startDefil(){
document.getElementById("scroller").start();
}
window.onload=function(){
}
</script>
</HEAD>
<marquee id="scroller" scrollamount="5" direction="up" bgcolor="#ffffff"
</marquee>
</HTML>
??? la balise marquee c'est un peu trop vieux pour moi qui ne suis plus tout jeune mais l'adaptation à ta dernière réponse ne devrait pas te poser trop de souci !
il suffit d'entourer tes images par une div ayant un id différent et de faire du setTimeout mais vu que j'ai un poil de boulot je n'aurais hélas moins de temps pour me détendre.... ;o)
[o-_-o]
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
7 avril 2009 à 14:39
7 avril 2009 à 14:39
merci c vraiment cool...
;-)
Sébus La Brutus
;-)
Sébus La Brutus
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
16
6 avril 2009 à 13:28
6 avril 2009 à 13:28
je t'ai répondu point par point ( ou presque )
prends le temps de relire,
si tu ne réponds pas, je ne peux plus rien pour toi !
le but n'est pas de te faire, mais de t'aider à faire,
si cela ne t'intéresses pas achète un truc tout fait
et point barre.
prends le temps de relire,
si tu ne réponds pas, je ne peux plus rien pour toi !
le but n'est pas de te faire, mais de t'aider à faire,
si cela ne t'intéresses pas achète un truc tout fait
et point barre.
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
6 avril 2009 à 16:26
6 avril 2009 à 16:26
voila j ai fait un code tout simple pour expliquer ce que je cherche à faire.
Les differentes images représentent le menu.
J aimerai qu'il n'y est que 4images de visible et rendre le menu dynamique verticalement en fonction de la position du curseur sur le div. C'est a dire, imaginons le div d'une hauteur de 150px, si le curseur est en dessous de 75px les images montent si il y a des images a laisser apparaitre, et si le curseur et au dessus de 75px, les images descendent pour laisser apparaitre les images.
Sébus La Brutus
Les differentes images représentent le menu.
J aimerai qu'il n'y est que 4images de visible et rendre le menu dynamique verticalement en fonction de la position du curseur sur le div. C'est a dire, imaginons le div d'une hauteur de 150px, si le curseur est en dessous de 75px les images montent si il y a des images a laisser apparaitre, et si le curseur et au dessus de 75px, les images descendent pour laisser apparaitre les images.
Sébus La Brutus
sebastiengoret
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
6 avril 2009 à 16:26
6 avril 2009 à 16:26
voila le code
<!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>classe d'élement déplaçable</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
Sébus La Brutus
<!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>classe d'élement déplaçable</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
Sébus La Brutus