Hello people,
I’m trying to make a regional map in html and javascript, I’m sure how to do the following:
to hover over the city, he should change the city’s image with another clearer, and clicking in the city he should get a darker color than the picture when we hover.
Until there all right, but when I click it gets darker image and move the mouse in another city he immediately removes the dark image and return to the clearer picture.
How to keep the image when I click on it and still the effect of passing the mouse?
Codigo HTML
<div id="mapa"><im border="0" src="http://Caminho_da_IM...rao_sem_cor.gif" id="mapaimag" alt="Mapa" width="200" height="200" usemap="#Map" />
<map name="Map" id="Map">
<area href="#" onclick="mapa_on_1();" onMouseover="mapa_over_1();" shape="poly" coords="111,187,113,198,110,174,113,172,110,150,115,161,114,158,118,188,120,155,124,155,132,157,134,156,137,157,139,155,140,157,137" alt="cidade1l" />
<area href="#" onclick="mapa_on_2();" onMouseover="mapa_over_2();" shape="poly" coords="41,96,191,98,147,110,198,109,153,112,157,184,158,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142" alt="cidade2l" />
Codigo JAVASCRIPT
function mapa_on_1()
{
document.getElementById("mapaimag").src="http://IMAGEM_1_click.gif";
}
function mapa_over_1()
{
document.getElementById("mapaimag").src="http://IMAGEM_1_over.gif";
}
function mapa_on_2()
{
document.getElementById("mapaimag").src="http://IMAGEM_2_click.gif";
}
function mapa_over_2()
{
document.getElementById("mapaimag").src="http://IMAGEM_2_over.gif";
}
java code if I’m not mistaken is old
Please guys, help me,
Can anyone give me a hint how to achieve this. I see in some code they use (style = "opacity:). but I have no idea if it’s used two images of deferent color or not and how to use My Duvia is Keeping the image when I click on it and still the effect of spending mouse? with opacity or not
Note: I am new to java