Question

我们正尝试在图像地图上将鼠标悬停（悬停）时在图像输入元素上使用图像映射。

我们有一个Javascript函数来改变背景，它工作正常。当我们使用onclick函数替换背景图像时，这也可以正常工作。

但是只要鼠标移开，鼠标就会再次调用事件，并且在onclick事件期间图像背景会发生变化，并恢复为原始图像。

这是网址： https://s45dev.com/spavie/treatment-planner/man/#gf_2

1。）单击FACE，然后单击NEXT按钮。 2.）点击FOREHEAD。

您现在将看到橙色区域作为我们的映射区域。我们要做的是在脸上选择一个区域并在选择时仍然有悬停工作来说明其他区域。

这是我们的HTML：

<img id="Woman-Face" src="https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face.jpg" border="0" width="357" height="329" orgWidth="357" orgHeight="329" usemap="#image-face-map" alt="" />
<map name="image-face-map" id="ImageMapsCom-image-face-map">
<area shape="rect" coords="355,327,357,329" alt="Image Map" style="outline:none;" title="Image Map" href="javascript:;" />
<area id="Woman-Forehead" alt="Forehead" title="Forehead" href="javascript:;" shape="poly" coords="77,125,76,117,76,108,78,96,87,85,97,76,106,76,114,78,127,72,141,71,150,76,159,82,166,92,174,100,182,110,163,114,130,122,112,122,95,122,84,120" style="outline:none;" target="_self" onclick="wff_select();" onmouseover="if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face-forehead.jpg';" onmouseout="if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face.jpg';"  />
<area id="Woman-Eyes" alt="Eyes" title="Eyes" href="javascript:;" shape="poly" coords="75,145,80,133,100,128,114,132,126,132,137,132,144,127,165,122,180,122,189,127,194,136,190,142,175,147,148,145,133,145,119,145,109,149,102,155,92,156,81,158" style="outline:none;" target="_self" onclick="wfe_select();" onmouseover="if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face-eyes.jpg';" onmouseout="if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face.jpg';"  />
<area id="Woman-Lower" alt="Lower Face" title="Lower Face" href="javascript:;" shape="poly" coords="86,192,95,187,110,187,131,184,148,180,163,179,185,176,201,172,205,187,197,199,191,210,182,220,172,228,164,234,156,240,152,244,132,247,119,241,94,211" style="outline:none;" target="_self" onclick="wfl_select();" onmouseover="if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face-lower.jpg';" onmouseout="if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face.jpg';"  />
</map>

而且，这是javascript：

function wff_select(){
jQuery('#choice_2_26_0').attr('checked', true);
if(document.images) document.getElementById('Woman-Face').src='https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face-forehead.jpg';
}
function wfe_select(){
jQuery('#choice_2_26_1').attr('checked', true);
if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face-eyes.jpg';
}
function wfl_select(){
jQuery('#choice_2_26_2').attr('checked', true);
if(document.images) document.getElementById('Woman-Face').src= 'https://s45dev.com/spavie/wp-content/uploads/2018/02/woman-face-lower.jpg';
}

任何帮助将不胜感激！谢谢！

Answer 1

在我的网站上，当我鼠标悬停在脸部的任何区域时，我看不到任何橙色插图，只有当我点击脸部位时才会看到。 CSS悬停选择器可以使鼠标悬停时始终突出显示对象。

您可以像这样使用CSS：hover选择器：

#object{
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
}

#object:hover
{
  background-color: orange;
  box-shadow: 1px 1px 2px gray;
}

Here's a JSFiddle.

您可以将其更改为图片或其类似内容，以便按照您希望的方式工作。

Answer 2

我不确定我是否理解问题，但您不使用AJAX，因此Cookie将是“记住”更改并在页面重新加载后加载它们的最佳方式。

https://github.com/carhartl/jquery-cookie

因为我不知道你在服务器端使用什么语言。

使用onClick

2 个答案: