Balise <AREA .../>

kachlax Messages postés 15 Statut Membre -
gaerebut Messages postés 1060 Statut Membre - 24 mai 2010 à 23:43

Bonjour,

Est-il possible de spécifier des coordonnées dans une balise <AREA ... /> en pourcent? Cela me renvoie un résultat aléatoire quand j'essaie!

Merci!

Afficher la suite

1 réponse

gaerebut Messages postés 1060 Statut Membre 171

Bonjour,

je ne peux pas répondre à ta question mais je peux cependant te fournir un code que j'ai fais pour obtenir facilement les coordonnées d'une découpe d'image. Le voici (tu dois juste changer le chemin de l'image à la fin):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Obtenir les coordonné interne de l'image à chaque clique</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script type="text/javascript">
			var Ax = '';
			var Ay = '';
			
			var Bx = '';
			var By = '';
			
			var currentPoint = 'A';
			
			function getCoord(e){
				var coord = document.getElementById('coord');				
				var X = e.clientX;
				var Y = e.clientY;
				
				if(coord.innerHTML == '')
					coord.innerHTML = X + ',' + Y;
				else
					coord.innerHTML += ',' + X + ',' + Y;
				
				if(currentPoint == 'A'){
					Ax = X;
					Ay = Y;
					currentPoint = 'B';
				}
				else{
					Bx = X;
					By = Y;
					currentPoint = 'A';
				}
				
				if(Ax != '' && Ay != '' && Bx != '' && By != ''){
					var line = '';
					var lineLength = Math.sqrt((Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By));
					for(var i=0;i<lineLength;i++){
						line += "<div style='position:absolute;left:"+Math.round(Ax+(Bx-Ax)*i/lineLength)+"px;top:"+Math.round(Ay+(By-Ay)*i/lineLength)+"px;width:1px;height:1px;background:#00D4FF'></div>";
					}
					document.body.innerHTML += line;
				}
			}
		</script>
		
	</head>
	<body style="margin: 0; padding: 0;">
		<img src="TON_IMAGE.PNG" alt="Image" title="Cliquer sur l'image pour dessiner un tracé de coordonné" id="pic" onclick="getCoord(event)" border="0" style="cursor: crosshair">
		<div id="coord"></div>
	</body>
</html>

Tu obtiens donc les coordonnées que tu dois ensuite mettre dans la balise area ;-)

A+
Gaerebut

Balise <AREA .../>

1 réponse

Discussions similaires

Newsletters