Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

Efeito a:hover em mapa

Por , em Desenvolvimento frontend

Recommended Posts

Biel.    9

Biel.
Postado
Boa noite a todos. direto ao ponto. Pessoal, neste link temos um mapa do Brasil
Gostaria que ao encostar o cursor no mapa Rio Grande do Sul, o mapa mudasse de cor.
Não estou conseguindo fazer efeito a:hover . Quero muito que o mapa Rio Grande do Sul mude de cor quando
eu encostar o cursor nele.
Segue abaixo o codigo completo
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
a.link_mapa:link    { background:#CC9900; border:2px solid #969;}
a.link_mapa:visited { background:#CC9900; border:2px solid #969;   }
a.link_mapa:hover   { background:#0099FF; border:2px solid #FC3; }
a.link_mapa:active {}
a:link {
	background-color: #C90;
}
</style>

</head>

<body>
<img src="mapa/mapa_e.png" width="572" height="592" border="0" usemap="#Map" />

<map name="Map" id="Map">

  <area shape="poly" coords="285,559,288,563,292,568,296,574,300,577,302,581,300,586,301,590,305,588,308,582,316,574,322,569,326,568,330,563,335,555,339,548,343,540,347,532,351,528,347,525,349,520,352,518,350,515,344,513,338,509,329,503,322,499,315,497,309,496,301,495,295,494,290,496,286,499,281,502,275,504,270,508,265,512,260,517,256,521,252,526,247,530,244,535,240,539,244,540,249,541,253,544,256,548,259,552,262,555,265,556,269,554,274,554,278,556,282,558" href="#" />
  
</map>

</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado
Boa tarde a todos. direto ao ponto. Pessoal, neste link temos um mapa do Brasil
Gostaria que ao encostar o cursor no mapa Rio Grande do Sul, o mapa mudasse para vermelho ou qualquer outra cor.
Não estou conseguindo fazer efeito a:hover . Quero muito que o mapa Rio Grande do Sul mude para vermelho ou qualquer outra cor quando eu encostar o cursor nele.
Como estou iniciando os estudos em javascript, não sei onde começar. Pareçe que com onmouseover dar para fazer o efeito a:hover em javascritp, mas não sei como
Segue abaixo o codigo completo
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
a.link_mapa:link    { background:#CC9900; border:2px solid #969;}
a.link_mapa:visited { background:#CC9900; border:2px solid #969;   }
a.link_mapa:hover   { background:#FF0000; border:2px solid #FC3; }
a.link_mapa:active {}
a:link {
	background-color: #C90;
}
</style>


<script type="text/javascript">

</script>


</head>

<body>
<img src="mapa/mapa_e.png" width="572" height="592" border="0" usemap="#Map" />

<map name="Map" id="Map">

  <area shape="poly" coords="285,559,288,563,292,568,296,574,300,577,302,581,300,586,301,590,305,588,308,582,316,574,322,569,326,568,330,563,335,555,339,548,343,540,347,532,351,528,347,525,349,520,352,518,350,515,344,513,338,509,329,503,322,499,315,497,309,496,301,495,295,494,290,496,286,499,281,502,275,504,270,508,265,512,260,517,256,521,252,526,247,530,244,535,240,539,244,540,249,541,253,544,256,548,259,552,262,555,265,556,269,554,274,554,278,556,282,558" href="#" />
  
</map>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

stromdh    15

stromdh
Postado

cara, o mapa inteiro é um png... tu pode seguir uma dessas alternativas:

 

1 - fazer um mapa onde cada estado é uma imagem svg, jpg ou png

2 - fazer um spite css - onde em uma imagem tu coloca dois mapas, um principal e outro com a cor do rs que tu quer e posiciona ele com css e muda o posicionamento no hover sacou?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

Stromdh vc poderia dar um exemplo de como fazer isso ou postar algum link para que eu tenha ideia de como faze isso? Obrigado! :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Usa um svg do mapa do brasil.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não duplique seus tópicos.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito