单击并按住图像，而无需将鼠标悬停在其他图像上

Question

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?

JAVA

 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"; } 

 HTML <div id="mapa"> <img border="0" src="http://Caminho_da_IMAGEM_padrao_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" /> 

Please staff, 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

Thank you

Answer 1

This is how to use CSS style opacity

img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

opacity by using javascript

var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; // IE fallback

or use like this

document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

//-moz-opacity:0.5;  fox mozilla

It works on FireFox, Chrome and IE.