[POO] modif graphique div

Version imprimable

Bonjour,
je souhaite pouvoir agrandir des blocs div en horizontale (à gauche et à droite).
J'ai fait cela :

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
html>
<head>
<style type="text/css">
#dim1{
	border:1px solid red;
	position:absolute;
	left:100px;
	width:100px;
	top:100px;
	height:100px;
}
#dim2{
	border:1px solid blue;
	position:absolute;
	left:300px;
	width:100px;
	top:100px;
	height:100px;
}
div:hover{
	cursor:move;
}
body{
	cursor:n-resize;
}
</style>
<script>
var xinit; // position de la souris au clic sur le div
var yinit;
var x; // position de l'élément au départ
var y;
var initier = false; // si on est en train de cliquer
var gauche = false; // si on a cliqué sur un bord gauche
var droite = false; // si on a cliqué sur un bord droit
var haut = false; // si on a cliqué sur un bord haut
var bas = false; // si on a cliqué sur un bord bas
var idEnCours; // id du div qui est en cours de modif
 
function init(e, id){
	idEnCours = id;
	initier = true;
	xtmp = document.getElementById(id).offsetLeft;
	ytmp = document.getElementById(id).offsetTop;
	x = document.getElementById(id).offsetLeft;
	y = document.getElementById(id).offsetTop;
	xinit = e.clientX;
	yinit = e.clientY;
 
	// on test la position de la souris
	if(e.clientX >= xtmp && e.clientX <= xtmp+2){
		gauche = true;
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			haut = true;
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			bas = true;
		}
	}
	else if(e.clientX >= xtmp + document.getElementById(id).offsetWidth-2 && e.clientX <= xtmp + document.getElementById(id).offsetWidth){
		droite = true;
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			haut = true;
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			bas = true;
		}
	}
	else if(e.clientY >= ytmp && e.clientY <= ytmp+2){
		haut = true;
	}
	else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
		bas = true;
	}
}
 
function bouge(e){
	// si on a cliqué et qu'on bouge
	if(initier){
		xtmp = document.getElementById(idEnCours).offsetLeft;
		ytmp = document.getElementById(idEnCours).offsetTop;
		if(gauche){
			document.getElementById(idEnCours).style.left = e.clientX;
			document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (xtmp - e.clientX);
			if(haut){
				document.getElementById(idEnCours).style.top = e.clientY;
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
			}
			else if(bas){
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
			}
		}
		else if(droite){
			document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth);
			if(haut){
				document.getElementById(idEnCours).style.top = e.clientY;
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
			}
			else if(bas){
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
			}
		}
		/*else if(haut){
			document.getElementById(idEnCours).style.top = e.clientY;
			document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
		}
		else if(bas){
			document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
		}
		else{
			document.getElementById(idEnCours).style.left = e.clientX - (xinit-x);
			document.getElementById(idEnCours).style.top = e.clientY - (yinit-y);
		}*/
	}
	chercheCurseur(e, 'dim1');
	chercheCurseur(e, 'dim2');
}
 
function chercheCurseur(e, id){
	xtmp = document.getElementById(id).offsetLeft;
	ytmp = document.getElementById(id).offsetTop;
	// cherche le curseur adapté
	if(e.clientX >= xtmp && e.clientX <= xtmp+2){
		document.getElementById('body').style.cursor = "w-resize";
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			document.getElementById('body').style.cursor = "nw-resize";
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			document.getElementById('body').style.cursor = "sw-resize";
		}
	}
	else if(e.clientX >= xtmp + document.getElementById(id).offsetWidth-2 && e.clientX <= xtmp + document.getElementById(id).offsetWidth){
		document.getElementById('body').style.cursor = "e-resize";
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			document.getElementById('body').style.cursor = "ne-resize";
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			document.getElementById('body').style.cursor = "se-resize";
		}
	}
	/*else if(e.clientY >= ytmp && e.clientY <= ytmp+2){
		document.getElementById('body').style.cursor = "n-resize";
	}
	else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
		document.getElementById('body').style.cursor = "s-resize";
	}*/
	else{
		document.getElementById('body').style.cursor = "move";
	}
}
 
function fin(e){
	initier = false;
	gauche = false;
	droite = false;
	haut = false;
	bas = false;
}
 
function reset(){
	document.getElementById('body').style.cursor = "auto";
}
 
</script>
</head>
<body id="body" onmousemove="bouge(event);" onmouseup="fin(event);">
<div id="dim1" onmouseout="reset();" onmousedown="init(event, 'dim1');">bla</div>
<div id="dim2" onmouseout="reset();" onmousedown="init(event, 'dim2');">bla</div>
</body>
</html>

Cependant dans un cas le curseur se modifie quand on passe sur le div bleu mais pas pour le rouge.
Pourquoi cela ne fonctionne pas? Dois je faire autrement?

Merci pour votre aide.

07/10/2008, 13h47
franfr57

Est ce que quelqu'un pourrait m'aider?

C'est si compliquer que ça que de changer la forme de curseur pourtant sur de nombreux site il y arrive...

AIdez moi s'il vous plait

Merci pour votre aide
07/10/2008, 13h52
le_chomeur

sans trop regarder le code :

=> au moment de ton mouseover, regarde ou te trouves tu dans ton élément , si tu te trouve à 0 du bord gauche = curseur de redimenssionement ( je mettrais même une valeur minimum de 10, si tu est a 10 du bord droit = curseur , sinon rien ...

voila pour l'algo
07/10/2008, 16h22
franfr57

Cependant, je n'ai pas de mouseover...
C'est la fonction chercheCurseur qui modifie le curseur
Cela fonctionne très bien pour un objet, mais pas pour l'autre
07/10/2008, 16h29
le_chomeur

travaille plutôt sur tes objets que sur l'écran global :)
08/10/2008, 10h44
franfr57

J'ai essayer de déplacer le code suivant :

Code:

onmousemove="bouge(event);" onmouseup="fin(event);">

dans mes 2 bloc div mais cela ne change rien. Ca ne fonctionne toujours pas.

Pourriez vous m'expliquer comment faire stp?
Ou connaissez vous un site qui expliquer la gestion graphique des div en javascript?

Merci pour votre aide
13/10/2008, 09h38
franfr57

Personne ne peut m'aider?
Personne ne sait comment faire cela?
Pourtant sur internet ces opérations sont de plus en plus répandus...

Je n'ai pas réussi à trouver un code qui fait drag/drop/redimensionner bien commenté. Savez vous ou je pourrez trouver cela?

Pouvez vous m'aider pour mon problème? SVP

trouvé sur un autre site de dev :

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
    <HTML>
    <HEAD>
    <SCRIPT language="javascript" TYPE="text/javascript">
 
    var ie4 = document.all;
    var ns4 = document.layers;
    var ns6 = ((!ie4)&&(document.getElementById));
 
    var monCalque;
 
    function init()
    {
    if(ns6)
    {
    document.addEventListener("mousedown",start, false); // on affecte une fonction à chaque evenement
    document.addEventListener("mousemove",drag, false);
    document.addEventListener("mouseup",drop, false);
    }
    else
    {
    if(ns4)
    {
    document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|
    Event.MOUSEUP) // on capture les evenements
    }
    document.onmousedown=start; // on affecte une fonction à chaque evenement
    document.onmousemove=drag;
    document.onmouseup=drop;
    }
    }
 
    function start(e)
    {
    if (ns4)
    {
    monCalque=document.layers[e.target.name];
    if(monCalque)
    {
    imsrc = e.target.src; // on recupere le nom de l'image
    imname = e.target.name; // le nom de la balise <img>
    imwidth = e.target.width; // sa taille initiale en X
    imheight = e.target.height; // en Y
    monCalque.X=monCalque.left; // sa place à gauche
    monCalque.Y=monCalque.top; // sa place en haut
    }
    return false;
    }
    else if (ie4)
    {
    monCalque=event.srcElement.parentElement;
    if(monCalque)
    {
    imsrc = event.srcElement.src;
    imname = event.srcElement.name;
    imwidth = event.srcElement.width;
    imheight = event.srcElement.height;
    monCalque.X=monCalque.style.left;
    monCalque.X=monCalque.X.substring(0,monCalque.X.length-2); // on supprime px à la fin de la chaine
    monCalque.Y=monCalque.style.top;
    monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2); // on supprime px à la fin de la chaine
    }
    }
    else if (ns6)
    {
    monCalque=document.getElementById(e.target.name);
    if(monCalque)
    {
    imsrc = e.target.src;
    imname = e.target.name;
    imwidth = e.target.width;
    imheight = e.target.height;
    monCalque.X=monCalque.style.left;
    monCalque.X=monCalque.X.substring(0,monCalque.X.length-2);
    monCalque.Y=monCalque.style.top;
    monCalque.Y=monCalque.Y.substring(0,monCalque.Y.length-2);
    }
    }
    }
    function drag(e)
    {
    if(monCalque)
    {
    contenu = '<img name="'+imname+'" border="1px" src="dummy.gif" width="'+ imwidth; // dummy.gif pour une image vide.
    contenu += 'px" height="'+ imheight +'"></img>'; // border=1px pour voir un cadre.
    if (ns4)
    {
    imwidth = eval(e.pageX-monCalque.X); // on recupere la nouvelle taille en X
    imheight = eval(e.pageY-monCalque.Y); // en Y
    monCalque.document.open();
    monCalque.document.write(contenu);
    monCalque.document.close();
    }
    else if ((ie4)&&(monCalque.id))
    {
    imwidth = eval(event.clientX-monCalque.X); // on recupere la nouvelle taille en X
    imheight = eval(event.clientY-monCalque.Y); // en Y
    monCalque.innerHTML=contenu;
    return false;
    }
    else if ((ns6)&&(monCalque.id))
    {
    imwidth = eval(e.clientX-monCalque.X); // on recupere la nouvelle taille en X
    imheight = eval(e.clientY-monCalque.Y); // en Y
    monCalque.innerHTML=contenu;
    return false;
    }
    }
    }
 
    function drop(e)
    {
    if(monCalque)
    {
    contenu = '<img name="'+imname+'" src="'+ imsrc +'" width="'+ imwidth;
    contenu += 'px" height="'+ imheight +'"></img>';
 
    if (ns4)
    {
    monCalque.document.open(); // on ouvre puis on ecrit le document
    monCalque.document.write(contenu);
    monCalque.document.close();
    monCalque=null;
    }
    else if ((monCalque.id)) // pour ie et ns>4
    {
    monCalque.innerHTML=contenu; // on ouvre puis on ecrit le document
    monCalque=null;
    return false;
    }
    }
    }
    </SCRIPT>
    </HEAD>
 
    <BODY>
    <DIV id="dgo" z-index="auto" style="position:absolute;left:5;top:10" > <!-- position:absolute necessaire pour ns4 -->
    <IMG name="dgo" src="irlande2.jpg" width="100px" height="101px"></DIV>
    <DIV id="dgo2" z-index="auto" style="position:absolute;left:300;top:10" >
    <IMG name="dgo2" src="irlande.jpg" width="102px" height="103px"></DIV>
    <SCRIPT> init();</SCRIPT> <!-- déclenchement ------->
    </BODY>
 
    </HTML>

je te laisse étudier la source elle corespond plus ou moins a ta demande ;)

13/10/2008, 09h58
franfr57

Je suis désolé ce code ne correspond pas à ma demande. Je souhaite avoir le curseur qui change sur plusieurs div.
J'avais déja testé ce code...

Teste mon code, comme cela tu verra comment le curseur change

voici un exemple avec une infobulle ( elle ne sert a rien mais c'est un exemple que j'avais sous la main ^^ )

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
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
96
97
98
99
100
101
102
103
104
105
106
107
 
<!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>
    <title>Untitled Page</title>
    <style type="text/css">
            .bulle 
            {
            	background-color:Gray;
            	border:1px solid red;
            	width:100px;
            	height:150px;
            	position:absolute;
            }
    </style>
    <script type="text/javascript">
    var MyBulle = null;
    function addEvent(obj,event,fct)
    {
        if( obj.attachEvent)
                obj.attachEvent('on' + event,fct);
        else
                obj.addEventListener(event,fct,true);
    }
 
    function createInfoBulle(target)
    {
        MyBulle = document.createElement("div");
        MyBulle.className = "bulle";
        MyBulle.innerHTML = target.title;
        document.body.appendChild(MyBulle);
    }
 
    function GetCoord(event) {
      //Récupération de l'élément survolé
      var target = event.target || event.srcElement;
      //Récupération de l'évènement
      var ev = event || window.event;
      //Récupération de la position de l'élément survolé
      var pos = FindPos(target);
      //Récupération de la position de la souris DANS l'élément
	  var diffx = ev.clientX - pos['X'];
	  var diffy = ev.clientY - pos['Y'];
 
	  //Gestion du curseur
	  if(diffx > 0 && diffx < 10){
		target.style.cursor = "w-resize";
	  }
	  else if(diffx < parseInt(target.offsetWidth) && diffx > parseInt(target.offsetWidth) - 10)
	  {
		target.style.cursor = "e-resize";
	  }
	  else{
		target.style.cursor = "default";
	  }
 
	  //On vérifit si l'élément survolé est de type info Si oui on affiche la bulle
      if(target.className == "moi")
      {
        if(MyBulle == null)createInfoBulle(target);
 
        MyBulle.style.top = ev.clientY + 5 + "px";
        MyBulle.style.left = ev.clientX + 5 + "px";
		MyBulle.innerHTML = "x : "  +diffx+"  y : "+diffy ;
      }
      else if(MyBulle != null)
      {
        try
        {
            document.body.removeChild(MyBulle);
            MyBulle = null;
        }
        catch(err){alert(err.message);}
      }
 
    }
 
   function FindPos(AObject)
    {
        var posX = 0, posY = 0;
        do
        {
            posX += AObject.offsetLeft;
            posY += AObject.offsetTop;
            AObject = AObject.offsetParent;
        }
        while( AObject != null );
        var pos = [];
        pos['X'] = posX;
        pos['Y'] = posY;
        return pos;
    }
 
 
    </script>
</head>
<body onmousemove="GetCoord(event)">
<br /><br />
<br />
<br />
<div style="width:200px;height:200px;border:1px solid red;margin-left:500px;" id="toto" class="moi" title="voici du beau test 'fdsqf  ">
madiv
</div>
<div style="position:absolute;left:20px;top:50px;border:1px solid green">
</div>
</body>
</html>

13/10/2008, 10h50
franfr57

Merci pour ton exemple, mais le div ne se redimensionne pas...

Je viens de trouver un très bon site :
http://blog.oli-web.com/?2006/04/23/...rop-javascript

Tout est bien expliqué et je viens de réussir à faire ce que je souhaite.
13/10/2008, 11h05
le_chomeur

je sais que la div ne se redimensionne pas , j'ai indiqué que j'avais juste fais la gestion du curseur :)