Javascript - Menu dynamique en fonction de la position du curseur sur celui-ci [Résolu]

Signaler
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
-
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009
-
Bonjour à tous,

Je cherche un moyen de créer un menu dynamique verticalement. Ce menu contient une série d'image provenant d'une base de données et peuvent donc être très nombreuses.
Ce menu est placé à un endroit précis sur la page et à une taille définit.
Ce n'est donc pas le menu entier qui doit ce déplacer, mais les images à l'intérieur de ce menu...
Pour couronner le tout, j'aimerai que ce menu bouge en fonction de la position du curseur sur celui-ci. C'est à dire, si le curseur est au point milieu du menu, celui-ci est fixe, si le curseur est au dessus du point milieu, le menu descend et vis-versa.

J'espère avoir été le plus clair possible dans mes explications et avoir une réponse correcte de votre part...

Merci à vous tous

Sébus La Brutus

12 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
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
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009

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
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
>>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...

@+
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009

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
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
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....
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
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,
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009

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
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
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]
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009

merci c vraiment cool...
;-)

Sébus La Brutus
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
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.
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009

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
Messages postés
13
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
8 avril 2009

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