Era o seguinte tinha um mapa e querias saber as coordenadas dele, depois de quebrar a cabeça achei um código de um colega na internet que ensinava.
http://blogdofabiolima.blogspot.com/2009/01/mapeamento-de-imagens-em-html.html
Segue o código e o mapa;
<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 -->
<div align="center">
<img src="mapa_brasil.jpg" width="390" height="369" border="0" usemap="#Map3"style="border-style:none;position:absolute;top:0px;left:0px" onmousedown="listar(event)">
</div>
<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>
Segue o código....
<html>
<body>
<div id="contents">
<div id="main">
<?
$sql="select * from homologacaobrasil";
$query=mysql_query($sql);
$total=mysql_num_rows($query);
?>
<div id="tit_pagina">
<p class="tahoma14azulb" style="margin-left:15px">Homologações</p>
</div>
<div id="corpo_pagina">
<div id="texto" class="tahoma11preto" align="justify">
<p><span class="tahoma11preto">Disponibilizamos aqui as homologações dos módulos separado por estado.</span></p>
</div><br />
<div align="center">
<img src="img/estados-homologados.jpg" style="position:relative;border-style:none;" width="400" height="352" usemap="#Map3"/>
</div>
<map name="Map3">
<?
$i=0;
while($linha=mysql_fetch_array($query)){
?>
<? if ($linha['recno']=='1'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="267,157,308,157,309,173,266,169" title="Bahia" alt="Ba" />
<? } ?>
<? if ($linha['recno']=='2'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="152,216,186,218,186,252,152,252" title="Mato Grosso do Sul" alt="MS" />
<? } ?>
<? if ($linha['recno']=='3'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="81,14,130,15,130,27,79,24" title="Roraima" alt="RR"/>
<? } ?>
<? if ($linha['recno']=='4'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="49,91,128,91,125,100,53,99" title="Amazonas" alt="AM" />
<? } ?>
<? if ($linha['recno']=='5'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="201,201,224,202,225,209,199,209" title="Goias" alt="GO" />
<? } ?>
<? if ($linha['recno']=='6'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="13,135,44,136,44,145,11,145" title="Acre" alt="AC" />
<? } ?>
<? if ($linha['recno']=='7'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="331,139,367,140,332,145,365,144" title="Alagoas" alt="AL" />
<? } ?>
<? if ($linha['recno']=='8'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="312,83,335,94,335,102,325,124,312,106" title="Ceará" alt="CE" />
<? } ?>
<? if ($linha['recno']=='9'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="232,193,237,194,232,196,238,196" title="Distrito Federal" alt="DF" />
<? } ?>
<? if ($linha['recno']=='10'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="297,229,356,227,295,232,359,237" title="Espirito Santo" alt="ES" />
<? } ?>
<? if ($linha['recno']=='11'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords= "259,65,241,100,258,142,284,109,288,74" title="Maranhao"alt="MA">
<? } ?>
<? if ($linha['recno']=='12'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="248,214,276,214,248,220,276,220" title="Minas Gerais" alt="MG">
<? } ?>
<? if ($linha['recno']=='13'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="166,87,208,88,208,105,161,103" title="Para" alt="PA">
<? } ?>
<? if ($linha['recno']=='14'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="337,114,366,115,338,119,363,119" title="Paraiba" alt="PB">
<? } ?>
<? if ($linha['recno']=='15'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="328,128,389,128,326,132,389,133" title="Pernambuco" alt="PE">
<? } ?>
<? if ($linha['recno']=='16'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="334,95,359,96,328,102,362,104" title="Rio Grande do Norte" alt="RN">
<? } ?>
<? if ($linha['recno']=='17'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="170,215,155,219,155,255,182,272,202,244,202,228,186,216" title="Rio Grande do Sul" alt="RS">
<? } ?>
<? if ($linha['recno']=='18'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="136,225,135,227,148,229,162,240,167,233,166,219,151,224,134,224" title="Santa Catarina" alt="SC">
<? } ?>
<? if ($linha['recno']=='19'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="206,239,233,244,211,259,234,272" title="Sao Paulo" alt="SP">
<? } ?>
<? if ($linha['recno']=='20'){ ?> <area shape="poly" href="javascript:alert('<?php echo addslashes($linha['estado'] ." [". $linha['descricao']. "]"); ?>')" coords="329,152,358,151,327,154,358,154" title="Sergipe" alt="SE">
<? } ?>
<?
$i++;
}
?>
</map>
</div></div>
</html>
Nenhum comentário:
Postar um comentário