Discussion :

[Droup]

Bonsoir à tous,
Sur ma page HTML, j'ai une div ayant l'option overflow : auto, et mon but serai de déplacer son contenu avec la souris, en cliquant dans la div et en déplaçant la souris.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="overflow:auto; position:relative; width:100px; height:100px;">
	<img style="position:absolute; left:0px; top:0px;" src="photo.png" />
	<div style="position:absolute; height:50px; width:50px; left:100px; top:100px;"></div>
	<div style="position:absolute; height:50px; width:50px; left:200px; top:200px;"></div>
	<div style="position:absolute; height:50px; width:50px; left:300px; top:300px;"></div>
</div>

Donc, ma div principale contient une image, et 3 div placés à des endroits très précis de l'image.
Donc, ma div étant plus petite que mon image, j'ai des barre de défilements verticales et horizontales. Donc pour le moment, il faut utiliser ces barres pour se déplacer dans l'image, et ainsi voir toutes les div. Et j'aimerai pouvoir utiliser la souris pour me déplacer.
Comment puis je faire ?

Merci d'avance pour votre réponse.

[le_chomeur]

- calculer a position de la souris a l'intérieur de ta div
- jouer sur les scroll

une petite recherche sur le forum te donnera toute les billes nécessaire.

[Droup]

C'est bon, j'ai réussi. Merci.

Pour ceux que ça intéresse voici le code :

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
<script type='text/javascript'>
	var scrollT=200;
	var scrollL=100;
	var x_mouse, y_mouse;
	var x_mouse_dep, y_mouse_dep;
	var click = false;
	var d_principal = document.getElementById('principal');
	window.onload = function(){
		if(navigator.appName.substring(0,3) == "Net")
			document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = position;
	}	
	function fnOnMouseDown()
	{
		if(click ==true)
		{
			click =false;
			scrollL = d_principal.scrollLeft;
			scrollT = d_principal.scrollTop;
		}
		else
			click =true;
	}
	function position(e)
	{
		if(click==true)
		{
			x_mouse = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
			y_mouse = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
			d_principal.scrollLeft = scrollL + (x_mouse_dep - x_mouse);
			d_principal.scrollTop = scrollT + (y_mouse_dep - y_mouse);
		}
		else
		{
			y_mouse_dep = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
			x_mouse_dep = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
		}
	}
</script>
<div id="principal" onMouseDown="fnOnMouseDown();"  style="overflow:auto; position:relative; width:100px; height:100px;">
	<img style="position:absolute; left:0px; top:0px;" src="photo.png" />
	<div style="position:absolute; height:50px; width:50px; left:100px; top:100px;"></div>
	<div style="position:absolute; height:50px; width:50px; left:200px; top:200px;"></div>
	<div style="position:absolute; height:50px; width:50px; left:300px; top:300px;"></div>
</div>

Là par contre, il faut cliquer une fois dans la div pour verrouiller et pouvoir déplacer le contenu, puis re-cliquer pour déverrouiller.
Le contenu suis là souris.