beingsane
8/14/2017 - 5:57 PM

Mapeamento de Imagens em HTML

Mapeamento de Imagens em HTML

image_map.html
content_copyfile_download
<html> 
	<head> 
		<script type="text/javascript"> 
			function coordenadas(event) 
			{ 
				var x=event.clientX; 
				var y=event.clientY; 
				var coord = x + "," + y; 
				return coord; 
			} 

			function listar(event){ 
				var coord = coordenadas(event); 
				var texto = document.getElementById("listacoord"); 
				texto.value += coord + ","; 
			} 
		</script> 
	</head> 

	<body> 
		<!-- AQUI VOCE COLOCA O ENDERECO DA IMAGEM QUE QUER MAPEAR --> 
		<!-- SUBSTITUA "IMAGEM.JPG" PELA SUA IMAGEM --> 
		<img src="image_footer.png" style="border-style:none;position:absolute;top:0px;left:0px" onmousedown="listar(event)"> 

		<p style="position:absolute;top:400px;">Clique na imagem para marcar as coordenadas.<br/> 
		Copie estas coordenadas e cole dentro no atributo coords="" da tag <AREA>.<br/> 
		Não esqueça de apagar a vírgula no final do da linha gerada.</p> 

		<textarea type="text" style="position:relative;top:500px;" id="listacoord" cols="100" rows="8"></textarea> 
	</body> 
</html>