Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou com um probleminha aqui na minha pg, preciso fazer um mapa onde eu eu clico no estado ele muda de cor e abre uma nova div na mesma pg... até ai tranquilo eu fiz, só que não consigo colocar mais de um estado, tipo acrecento no css e no html um novo estado e é como não existisse...
não sei o que acontece, não conheço javascript pguei um código pronto que fazia isso...
se alguem puder me ajudar agradeço...
essa é a imagem do mapa como tem que ficar
/applications/core/interface/imageproxy/imageproxy.php?img=http://img192.imageshack.us/img192/8653/65117959.gif&key=97e1c00c22ac8ed2a304753de2d286c8fe1af110eef5268bf1d0754d6d93f860" alt="Imagem Postada" />
e esse é meu código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css"> color: #828180;
text-decoration: none;
} text-decoration: none;
color: #828180;
} text-decoration: none;
color: #666;
} text-decoration: none;
}</style></head>
<script language="javascript">
function showdiv(ativar,id1,id2)
{ var A=document.getElementById(id1);
var B=document.getElementById(id2);
if(ativar=='sim')B.style.display = 'block';
A.style.display= 'none';
}A.style.display = 'block';
B.style.display= 'none';
}
}</script>
<body>
<div class="geral">
<div class="mapa"><img src="mapabrasil2.gif" /></div><!--início div parana mapa -->
<div id="paranaA"><a href="#" onclick="showdiv('sim','paranaA','paranaB'); return false" ><strong><img src="paranaon.gif" border="0" /></strong></a></div><div id="paranaB" style="display:none">
<div align="left"><a href="#" onclick="showdiv('nao','paranaA','paranaB'); return false" ><strong><img src="paranaover.gif" border="0" /></strong></a><br>
<div class="textoestados"><strong>Paraná</strong><br /> <a href="#">Curitiba</a><br /> <a href="#">Londrina</a><br /> <a href="#">Maringá</a></div>
</div>
</div></div></div>
</body>
</html>e esse é o css
@charset "utf-8";
/ CSS Document /
.geral{
position:absolute;
left:50%;
margin-left:-350px;
width:700px;
margin-top:20px;
border:#9F3 solid 5px;
}
.mapa{
float:left;
margin-left:px;
margin-top:10px;
}
.textoestados{
float:left;
margin-left:230px;
margin-top:-180px;
font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#b01f24;
width:190px;
background-color:#EFEFEF;
border:#8C8B8A solid 1px;
padding:8px;
}
#paranaA{
float:left;
margin-left:254px;
margin-top:-149px;
}
#paranaB{
float:left;
margin-left:254px;
margin-top:-149px;
}bem eu não entendo muito do funcionamento do javasript...
consegui fazer com que funcione sim...
mas em algumas situações o estado vai para baixo do mapa sendo que coloquei o mapa como fundo...
bem mas resumendo não vai adiantar... não havia pensado que uma imagem é quadrada e o link vai acabar pegando em outros estados...
ai não adianta mesmo
rsrsrsrs
o jeito vai ser fazer em flash
hehehe
de toda forma valew
Pelo que eu to vendo, você só definiu as regras para o PR...
Se não definir para o resto não vai funcionar mesmo...
Se não é isso, então poste o código completo...