单击并保持图像，而不改变悬停到另一个图像

Click and hold image without changing the hover into another image

本文关键字：图像 改变 悬停 另一个 单击      更新时间：2023-09-26

我正在尝试在html和javascript中制作区域地图，我确定如何做以下操作:

悬停在城市上，他应该把城市的图像换成另一个更清晰的，当我们悬停在城市上时，他应该得到一个比图片更暗的颜色。

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

如何保持图像，当我点击它，仍然通过鼠标的效果?

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新手

谢谢

这是如何使用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 */
}

不透明

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

相关文章：