Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>-_/\_- Guy Dev. -_/\_-</title>
 
        <!-- un p'tit CSS pour la présentation -->
        <style type="text/css"> 
        </style>
 
        <!-- insertion du JavaScript -->
        <script type="text/javascript">
        function slider(mini, maxi) {
            // propriétés
            this.min = mini;
            this.max = maxi;
            this.i_ligne = "line_black.gif";
            this.i_slider = "icon.gif";
            this.currValue = 0;
            this.isDragable = false;
 
            // propriétés utiles au drag !
            this.posX;
            this.posY;
            this.Ox;
            this.Oy;
 
            // méthodes
            this.affiche = sliderAffiche;
            this.initDrag = initDrag;
            this.drag = drag;
            this.resetDrag = resetDrag;
        }
 
        function sliderAffiche(left, top) {
            docBody = document.getElementsByTagName('BODY').item(0);
 
            // insertion de la Div dans laquelle sera affiché le slider
            myDiv = document.createElement('DIV');
            myDiv.style.backgroundColor = "#FFFFBB";
            myDiv.style.position = "absolute";
            myDiv.style.top = top+'px';
            myDiv.style.left = left+'px';
            docBody.appendChild(myDiv);
 
            // insertion du slider lui-même
            sliderLine = document.createElement('IMG');
            slider = document.createElement('IMG');
 
            sliderLine.src = this.i_ligne;
            slider.src = this.i_slider;
 
            slider.style.position = 'absolute';
            slider.style.top = (sliderLine.offsetTop+9)+'px';
            slider.style.left = (sliderLine.offsetLeft-4)+'px';
 
            myDiv.appendChild(sliderLine);
            myDiv.appendChild(slider);
 
            myDiv.onmousedown = this.initDrag;
            myDiv.onmouseup = this.resetDrag;            
            myDiv.onmousemove = this.drag;
        }
 
        function initDrag(e) {
            this.isDragable = true;
            this.Ox = e.clientX;
            this.Oy = e.clientY;            
            this.posX = slider.offsetLeft;
            this.posY = slider.offsetTop;        
        }
 
        function drag(e) {
            if(this.isDragable) {
                newPosX = e.clientX-(this.Ox-this.posX);
                slider.style.left = newPosX+'px';            
            }
        }
 
        function resetDrag(e) {
            this.isDragable = false;
        }
 
        function init() {
            test = document.getElementById('test');
            mySlider = new slider(0, 50);
            mySlider.affiche(200,100);
        }
        </script>
    </head>
    <body onLoad="init()">
    </body>
</html>
Bonjour à tous, voila mon probleme. L'image icon.gif est censée suivre la souris lors d'un cliquer-glisser, mais le probleme c'est que le navigateur execute bien le programme pendant 2 à 3 pixels, puis après interprète mon cliquer-glisser comme un déplacement d'image !!! ce qui me plante mon cliquer-glisser.

Quelqu'un aurait-il une solution ?

PS : ATTENTION ! Le code JS ci-dessus ne marche qu'avec FIREFOX

Merci d'avance