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>