11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JS Récupérer les coordonnées d'un type=image sans refresh

Bonjour à tous.

Cela fait quelques temps que je virevolte sur votre forum de loin, mais aujourd'hui j'aurai besoin de votre aide.

Dans le cadre d'un développement d'une application interne de type SIG (cartographie), je dois utiliser MapServer.

Lors d'un "upgrade" de l'application, qui est en php/html, je voudrais rendre toute cela plus "agréable", et faire en sorte que les rechargements de pages à chaque mouvements de la carte. (Ce qui est le cas pour le moment, je ne suis pas encore au niveau de googleMaps Smiley ohwell ) disparaissent.

Le soucis qui me chagrine, c'est que pour utilisé de l'ajax dans ce script, il me faut récupérer les coordonnées cliquées sur le input type=image qu'est la carte, ce qui ne pose aucun problème lors d'une soumission (un clic) normal. Mais sans rafraichissement, je n'arrive pas a récupérer ces coordonnées à travers une simple fonction js.

Pourriez-vous m'aider ?
Modifié par iizno (04 Sep 2007 - 11:47)
Exemple 
<form name="test">
<input type="image" name="myMap" src="map.png">
</form>


Et quand l'utilisateur clic, tu récup myMap.x et myMap.y .
Tout simplement Smiley smile !
Modifié par MoOx (04 Sep 2007 - 09:56)
En temps normal oui, dans la page de reception du formulaire tout ça. Mais la le soucis, c'est que je veux utilisé la chose sans recharger la page, et donc sans envoyer le formulaire Smiley ohwell

Pour l'instant, je fais mes tests avec ce petit bout de code, cela te permettra peut être de comprendre ce que je veux faire Smiley ohwell 

<script type="text/javascript">

function recharge(el) {
	document.getElementById('contenu').innerHTML = el.elements['carte.x'].value;
}
</script>

<form name="formulaire" method="post" onsubmit="recharge(this); return false;">

<input name="carte" type="image" src="images/image.jpg" />

</form>
<div id="contenu">
</div>
Oui j'aivais compris que c'étais coté client.

Tu peux faire 
el.elements['carte'].x
Essaye ça!
Modérateur
Salut,

Tu peux faire comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<title>Exemple</title>

		<script type="text/javascript"><!--

var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	alertCoord: function(e)
	{
		var oEl, iOffsetX, iOffsetY, iX, iY;

		oEl = !document.documentElement.clientWidth?
			document.body:
			document.documentElement;
		iOffsetX = window.Event ?
			pageXOffset:
			oEl.scrollLeft;
		iOffsetY = window.Event ?
			pageYOffset:
			oEl.scrollTop;
		iX = window.Event ?
			e.pageX:
			event.clientX + iOffsetX;
		iY = window.Event ?
			e.pageY:
			event.clientY + iOffsetY;

		alert('x = ' + iX + ' / y = ' + iY);

		return oO.cancelClick(e);
	},

	init: function()
	{
		return oO.connect(document.getElementById('carte'), 'click', oO.alertCoord, false);
	}
};

oO.connect(window, 'load', oO.init, false);

		//--></script>
	</head>
	<body>

<form action="#" method="post">
	<div>
		<input id="carte" name="carte" type="image" src="images/image.jpg" alt="Envoyer" />
	</div>
</form>

	</body>
</html>
Ton code marche mais ce n'est pas exactement ce que je veux.

Le input type=image renvoie les coordonnées cliqués par rapport à l'image, l'origine étant le bord haut gauche de l'image.

Dans le code que tu me donnes, on se base sur la page, l'origine étant le bord haut gauche de la page.

tu vois la nuance ?

J'ai peut etre trouvé une piste, en listant tout les elements recupérés lors d'un onSubmit(this) sur un form, il n'apparait aucun des carte_x ou carte_y. Peut être ce que je veux faire est-il simplement pas possible Smiley ohwell
Modérateur
Arf... oui. Au temps pour moi... Smiley langue

Comme ça alors :
var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	getSource: function(e)
	{
		return e.target || e.srcElement;
	},

	alertCoord: function(e)
	{
		var oEl, iOffsetX, iOffsetY, iX, iY, oSrc;

		oEl = !document.documentElement.clientWidth?
			document.body:
			document.documentElement;
		iOffsetX = window.Event ?
			pageXOffset:
			oEl.scrollLeft;
		iOffsetY = window.Event ?
			pageYOffset:
			oEl.scrollTop;
		iX = window.Event ?
			e.pageX:
			event.clientX + iOffsetX;
		iY = window.Event ?
			e.pageY:
			event.clientY + iOffsetY;
		oSrc = oO.getSource(e);

		alert('x = ' + (iX - oSrc.offsetTop) + ' / y = ' + (iY - oSrc.offsetLeft));

		return oO.cancelClick(e);
	},

	init: function()
	{
		return oO.connect(document.getElementById('carte'), 'click', oO.alertCoord, false);
	}
};

oO.connect(window, 'load', oO.init, false);
j'ai bien pigé comment ça marchai, et je remercie une nouvelle fois.
Ceci dit, il me reste un soucis, si jamais tu as encore un peu de temps pour m'aider.

Ton code marche parfaitement bien, il m'en résulte toute fois un bug.

Malgré mes tests acharnés, lors d'un clic sur la carte qui est un input type=image, le navigateur exécute d'abord la fonction associé au submit avant d'executé ta fonction. Or c'est dans la soumission que j'envois les coordonnées. Du coups, a chaques clic, il envoie les coordonnées du point cliqué avant.

Tu aurais une idée ?
Modérateur
Ben c'est à toi de définir l'ordre dans lequel tu éxécutes tes fonctions. Smiley smile

En repartant de l'exemple que je t'ai donné, ça donnerait quelquechose du genre :
var oO =
{
	// (...)

	getCoord: function(e)
	{
		var oEl, iOffsetX, iOffsetY, iX, iY, oSrc;

		oEl = !document.documentElement.clientWidth ?
			document.body:
			document.documentElement;
		iOffsetX = window.Event ?
			pageXOffset:
			oEl.scrollLeft;
		iOffsetY = window.Event ?
			pageYOffset:
			oEl.scrollTop;
		iX = window.Event ?
			e.pageX:
			event.clientX + iOffsetX;
		iY = window.Event ?
			e.pageY:
			event.clientY + iOffsetY;
		oSrc = oO.getSource(e);

		iX -= oSrc.offsetTop;
		iY -= oSrc.offsetLeft;

		oO.cancelClick(e);

		return oO.transmit(iX, iY);
	},

	transmit: function(iX, iY)
	{
		// ici on procède à l'envoi des coordonnées iX et iY par Ajax
	},

	init: function()
	{
		return oO.connect(document.getElementById('carte'), 'click', oO.getCoord, false);
	}
};

oO.connect(window, 'load', oO.init, false);

Modifié par koala64 (04 Sep 2007 - 20:13)
Sujet clos
Aller à