[Resolvido] Mapeamento de Imagem (Mapa do Brasil)

[Rodney3400 0]

Ola a todos,

 

Qual a melhor forma de eu estar mapeando um mapa do Brasil, sendo que terei link´s ao lado com todos estados Brasileiros, e passando o mouse no nome dos estados, o estado correspondente na figura mudará a cor, e se eu passar o mouse em um estado específico no mapa do Brasil, também mudará de cor no menu dos estados.

 

Alguma idéia de como começar ou onde procurar?

 

Obrigado a todos!

 

Rodney.

[William Bruno 1501]

O melhor mesmo, seria com Flash.

[Rodney3400 0]

O que acontece, é que eu vou ter um menu, e não vai ser proximo ao mapa, então quando acionado no mapa também acionaria no menu, entendeu?

 

Obrigado

 

Rodney

[Carutcho 0]

Cara,

com o flash você pode disparar eventos em javascript.

 

Não sei exatamente pq eu naum mexo com flash, mas sei q dá.

Da uma pesquisadinha aee ou procura la na área de flash, as vezes alguém pode te ajudar com isso tb.

 

Abss

[Rodney3400 0]

Consegui fazer o mapeamento com o dreamweaver, nos outros navegadores a função do mapeamento com onmouseover e onmouseout funcionam perfeitamente, somente no Internet Explorer que a função é aceita mas não é passado parametros para a função javascript

 

Alguma sugestão.

 

Obrigado

 

Rodney

[Rodney3400 0]

function acionaMenu(uf,imagem,stilo,stilo_a) {
	document.getElementById(stilo).style.backgroundColor = "#ffffff";
	//$(stilo).css("background","#ffffff");
	document.getElementById(stilo_a).style.color = "#000000";
	//$(stilo_a).css("color","#000000");
	document.getElementById("bandeira").innerHTML = uf;
	//$("#bandeira").html(uf);
	document.getElementById("mapa").style.visibility = "hidden";
	//$("#mapa").hide();
	document.getElementById("over").style.visibility = "visible";
	//$("#over").show().html("<img src='" + imagem + "' border='0' usemap='#Map' />");
	document.getElementById("over").innerHTML = "<img src='" + imagem + "' border='0' usemap='#Map' />";
}

function limpaMenu(stilo,stilo_a) {
	document.getElementById(stilo).style.backgroundColor = "#7a896c";
	//$(stilo).css("background", "#7a896c");
	document.getElementById(stilo_a).style.color = "#ffffff";
	//$(stilo_a).css("color","#ffffff");
	document.getElementById("bandeira").innerHTML = "";
	//$("#bandeira").html("");
	document.getElementById("mapa").style.visibility = "visible";
	//$("#mapa").show();
	document.getElementById("over").style.visibility = "hidden";
	//$("#over").html("").hide();
	document.getElementById("over").innerHTML = "";
}

Este código usando com o map abaixo feito pelo dreamweaver não funciona no IE, testei no Opera, Firefox, Mozilla, Netscape, Chrome, todo funcionam, repito, somente no IE não, ufa,,, alguma sugestão?

 

<area shape="poly" coords="185,407,193,409,193,407,197,408,202,412,206,419,209,417,214,421,220,423,227,
429,233,435,235,436,232,441,232,445,237,446,242,444,246,436,248,431,253,428,258,4
25,264,419,269,413,273,406,277,400,273,398,271,396,271,393,274,388,267,388,264,38
4,261,380,256,377,250,377,248,374,229,374,229,372,225,373,219,375,212,380,208,382
,199,393,194,398" href="java script:;" onmouseover="java script:acionaMenu('Rio Grande do Sul','images/sigabrasil/rs_over.gif','rs','rs_a');return true" onmouseout="java script:limpaMenu('rs','rs_a');" alt="Rio Grande do Sul" title="Rio Grande do Sul" />

Obrigado, Rodney.

[Rodney3400 0]

Bem pessoal,

 

Resolvi a questão, seguinte:

 

usei 3 div,

 

1º ficará como z-index: 3, e terá uma imagem do mesmo tamanho transparente;

2ª ficará como z-index: 2, e terá uma imagem que quero completa;

3ª ficará como z-index: 1, e não terá nenhuma imagem.

 

a medida que for passando o mouse sobre a imagem e vendo a região mapaeada, fiz um script para ir alternando os z-index, então assim sempre mostrará, porque o z-index: 3, nunca ficará sobreposto, então a área mapeada, estará sempre acima de todas, e o Internet Explorer enxergará ela.

 

Obrigado

 

Tópico finalizado.

 

Rodney.