Faire bouger une image

Version imprimable

Bonjour

Je suis carrément nul en Javascript mais je croyais que le truc que je voulais faire était assez simple, visiblement, je dois louper un truc.

Mon idée est de mettre une suite de line dans une barre et de faire se promerner une image en dessous jusqu'à l'endroit où se trouve le curseur.

Mais l'image ne bouge pas. Par contre, j'ai testé avec des alert, les function réagissent bien.

Voici mon code, je ne trouve pas le truc où je me plante.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<script language="javascript" type="text/javascript">
    function slidefondnoir() {
        for (i=1,i<200,i++) {
        document.getElementById("imgSlide").style.left = i+"px";
        setTimeout("img", 500);
        };
    }
 
    function retourfondnoir() {
        document.getElementById("imgSlide").style.left = "0px";
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <Composite:SM ID="SM" runat="server" />
    <div id="dmenu" class="FondMenu">
        <div id="imgSlide"><img src="App_Themes/BlocPerso/Menu_over.png" alt="" class="imgSlide"/></div>
        <div class="divMenu divM1" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlAccueil" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM2" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlNews" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM3" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlDossier" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM4" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlVideo" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM5" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlLives" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM6" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlForum" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM7" onmouseover="javascript:slidefondnoir();" onmouseout="javascript:retourfondnoir();"><asp:HyperLink ID="hlEvent" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
 
 
</div>
    </form>
</body>
</html>

Merci pour votre aide.

06/08/2012, 12h18
andry.aime

Bonjour,

Citation:

setTimeout("img", 500);

D'où vient cet "img"?

A+.
06/08/2012, 12h39
zooffy

C'est un mot que j'ai mis comme ça.
Il doit avoir une signification?

Mais je ne penses pas que le problème vienne de là parce que avant de le mettre cela ne fonctionnait pas non plus.
06/08/2012, 12h53
andry.aime

Citation:

Envoyé par zooffy

Il doit avoir une signification?

oui

Regarde ici.

A+.
06/08/2012, 13h15
zooffy

Merci pour ton aide.

Entre ma méconnaissance de javascript et l'anglais de ce tuto, j'ai rien compris.
Comment je mets une fonction en paramettre de ce truc ?

Mais surtout, je le redis, ceci n'est pas mon problème principal, mon souci est que mon image ne bouge pas, tout simplement.
06/08/2012, 14h22
andry.aime
Essaie avec

Citation:

Mais surtout, je le redis, ceci n'est pas mon problème principal, mon souci est que mon image ne bouge pas, tout simplement.

C'est normal car tu as ces erreurs.
Code:

1 2 3 4 5 6 function slidefondnoir() { for (i=1;i<200;i++) { document.getElementById("imgSlide").style.left = i+"px"; setTimeout(function(){},100); }; }
Regarde aussi l'utilisation de la boucle for.

A+.
06/08/2012, 14h49
zooffy

Merci poir ton aide.

Pour le for, ok, j'ai vu, j'ai gouré entre les , et les ; faute de frappe.

Pour le reste c'est quoi, juste les espaces ?

Enfin, ça marche bien, enfin presque. Je comprends pas le settimeout. C'est comme si'l ne fonctionnait pas. L'image bien se placer d'un seul coup là je l'attend à la fin.
J'ai essayé de lui passer ma fionctuion slidefondnoir, mais rien n'y fais. Je ne sais pas quoi metre dedans.

Bon, je crois que j'ai compris le settimeout.
Enfin, j'ai réussi à faire bouger mon image presque comme je le voulais.

Maintenant, j'ai un autre souci mais je pense qu'il vient d'un problème d'habitude.
Mon image est censée venir se placer au nieau du menu que je pointe avec la souris. J'ai réduit le timeout à 1 pour faire une mouvement fuilde, ça va bien.
Mais si je change de menu avant l'arrêt complet de l'image elle devient un peu "folle" et ne s'arrête pas sur le dernier que je pointe, comme si elle gardait une position a atteindre qu'elle ne doit plus atteindre.

En, gros, je crois que je ne sais pas arrêter le Timeout au bon moment.

Voici mon code à jour.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<script language="javascript" type="text/javascript">
    function slidefondnoir(limite) {
 
        bouge = document.getElementById("imgSlide").style.left;
        bouge = bouge.substr(0, bouge.length - 2);
 
        if (bouge != limite) {
            setTimeout(function() { slidefondnoir(limite); }, 1);
            if (bouge > limite) {
                bouge--;
            }
            else {
                bouge++;
            }
            document.getElementById("imgSlide").style.left = bouge + "px";
        }
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <Composite:SM ID="SM" runat="server" />
    <div id="dmenu" class="FondMenu">
        <div id="imgSlide" style="border:solid 1px Red;left:0px; height:43px;width:75px;position:relative;"><img src="App_Themes/wow/BlocPerso/Menu_over.png" alt="" class="imgSlide"/></div>
        <div class="divMenu divM1" onmouseover="javascript:slidefondnoir(0);">
            <asp:HyperLink ID="hlAccueil" runat="server" CssClass="hlMenu"></asp:HyperLink>
        </div>
        <div class="divMenu divM2" onmouseover="javascript:slidefondnoir(75);"><asp:HyperLink ID="hlNews" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM3" onmouseover="javascript:slidefondnoir(145);"><asp:HyperLink ID="hlDossier" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM4" onmouseover="javascript:slidefondnoir(215);"><asp:HyperLink ID="hlVideo" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM5" onmouseover="javascript:slidefondnoir(285);"><asp:HyperLink ID="hlLives" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM6" onmouseover="javascript:slidefondnoir(355);"><asp:HyperLink ID="hlForum" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
        <div class="divMenu divM7" onmouseover="javascript:slidefondnoir(425);"><asp:HyperLink ID="hlEvent" runat="server" CssClass="hlMenu"></asp:HyperLink></div>
 
 
</div>
    </form>
</body>
</html>