Bonjour,

J'ai deja vu un code permettant de faire ce que je veux mais ne le retrouvant plus et ne connaissant pas beaucoup l'ajax, je me tourne vers vous pour avoir un peu d'aide.

J'ai une image 1200px*915, je voudrais la faire entrer dans un cadre 815*595.
Petite image dexemple: http://www.imagup.com/imgs/1235070450.html

Au lieu d'avoir les deux scrollbar, je voudrais donc pouvoir la faire drag&drop pour se déplacer sur la map, est-ce possible ??

En attente de votre reponse, bonne journée.

facile, tu click, tu sauvegarde la position de la souris, ensuite quand la souris bouge, tu calcule dx et dy que tu retranches à la valeur de scrollLeft et scrollTop de ton élement conteneur.

merci de ta réponse nod_, j'ai reussi un peu a faire ce que je voulais, mais la carte "deborde" du cadre, je n'arrive pas a masquer les partie hors du cadre :s

Comment pourrais-je faire ?

sur ton conteneur tu fous overflow:auto ou overflow:hidden en fonction de ce que tu veux (et de ce qui marche aussi :p)

Super, je l'avais pas mis sur le bon cadre dans le css^^

Mais le problème, c'est que si je déplace trop la carte, je vois ensuite le fond du cadre :/ y a t il un moyen pour bloquer le deplacement de la carte lorsque l'on deplace trop celle-ci ?

Surement, donne le code js.

var Drag = {

	obj : null,

	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
	{
		o.onmousedown	= Drag.start;

		o.hmode			= bSwapHorzRef ? false : true ;
		o.vmode			= bSwapVertRef ? false : true ;

		o.root = oRoot && oRoot != null ? oRoot : o ;

		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

		o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

		o.xMapper = fXMapper ? fXMapper : null;
		o.yMapper = fYMapper ? fYMapper : null;

		o.root.onDragStart	= new Function();
		o.root.onDragEnd	= new Function();
		o.root.onDrag		= new Function();
	},

	start : function(e)
	{
		var o = Drag.obj = this;
		e = Drag.fixE(e);
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		o.root.onDragStart(x, y);

		o.lastMouseX	= e.clientX;
		o.lastMouseY	= e.clientY;

		if (o.hmode) {
			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
		} else {
			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
		}

		if (o.vmode) {
			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
		} else {
			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
		}

		document.onmousemove	= Drag.drag;
		document.onmouseup		= Drag.end;

		return false;
	},

	drag : function(e)
	{
		e = Drag.fixE(e);
		var o = Drag.obj;

		var ey	= e.clientY;
		var ex	= e.clientX;
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		var nx, ny;

		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

		if (o.xMapper)		nx = o.xMapper(y)
		else if (o.yMapper)	ny = o.yMapper(x)

		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
		Drag.obj.lastMouseX	= ex;
		Drag.obj.lastMouseY	= ey;

		Drag.obj.root.onDrag(nx, ny);
		return false;
	},

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
		Drag.obj = null;
	},

	fixE : function(e)
	{
		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}
};

up possible s'il vous plait ?

Euhh, vu l'usine à gaz, je laisse les autres essayer de trouver comment faire

aie :s si tu sais un peu comment faire, la fonctions a rajouter pour le faire, je veux bien que tu me lenvoi stp, au pire je le modifierais moi meme mais je ne vois pas du tout comment je pourrais faire sa :s

up svp..

J'ai pas trop envie de passer trop de temps à comprendre ton code, comme l'a dit Timot ce n'est pas évident de déchiffrer ton code.

Donc tu devras réfléchir par toi-même.
Le principe c'est: tu connais la position (coin haut gauche) de ton image, tu connais la position de ton cadre. Tu connais la dimension de ton image et de ton cadre donc tu peux calculer leurs positions bas droite et donc les valeurs que la position de l'image ne doit pas dépasser.
A partir de là lorsque tu fais un déplacement tu vérifie si les coordonnées de ton image ne dépassent pas celles de ton cadre. Si une des valeurs dépasse tu la fixe à la valeur limite (celle du cadre).

Okay :/

enfait je pense que la fonction fixE et ce petit bout de code permettent de le faire mais je ne comprends pas trop ce code :/

fixE : function(e)
	{
		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}

o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

Bonjour

En fait, j'ai réussi a résoudre mon problème, il fallait se tourner coté page php/html.

au lieu de Drag.init(document.getElementById("carte"));

j'ai modifier comme ceci
Drag.init(document.getElementById("carte"), null, minX, maxX, minY, maxY);

Sa pourrait en aider d'autre^^