javascript - 单击并按住图像而不将悬停更改为另一图像

Question

我正在尝试用 html 和 javascript 制作区域 map ，我知道如何执行以下操作:

要将鼠标悬停在城市上，他应该用另一个更清晰的颜色更改城市的图像，然后单击城市，他应该得到比我们悬停时的图片更深的颜色。

直到那里好吧，但是当我点击它时，它会得到更暗的图像并将鼠标移动到另一个城市，他立即删除黑暗图像并返回到更清晰的图片。

如何保持点击图片时仍保持鼠标经过的效果？

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" />

请工作人员帮助我，谁能给我提示如何实现这一目标。我在一些代码中看到他们使用(style =“opacity:)。但我不知道它是否使用了不同颜色的两个图像以及如何使用我的Duvia在我单击它时保留图像并且仍然是花费鼠标？是否具有不透明度注意:我是java新手

谢谢

Answer 1

这是如何使用CSS样式不透明度

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 */
}

使用 JavaScript 实现不透明度

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

或者像这样使用

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

//-moz-opacity:0.5;  fox mozilla

它适用于 FireFox、Chrome 和 IE。