Question

所以我有一个pie-nav，分为6个部分，当我使用地图工具将鼠标悬停在每个部分上时，它会突出显示并更改其他部分的颜色，我使用6个图像轻松实现了这一点，所以当我使用onmouseover时，整个图像会发生变化并给出选择器效果的印象。但是，我只想添加简单的过渡。我可以使用2个图像的css过渡，但在这里我使用6个图像和特定的区域形状。

<img src="assets/img/default.png" usemap="#Map" id="main-img">
<map name="Map">
  <area shape="poly" onmouseover="document.getElementById('main-img').src = 'assets/img/image1.png';" onmouseout="document.getElementById('main-img').src = 'assets/img/default.png';" coords="40,126,115,42,215,4,255,4,260,102,187,130,127,177" href="#">
  <area shape="poly" onmouseover="document.getElementById('main-img').src = 'assets/img/image2.png';" onmouseout="document.getElementById('main-img').src = 'assets/img/default.png';" coords="32,384,121,337,103,267,123,186,31,135,2,233,5,314" href="#">
  <area shape="poly" onmouseover="document.getElementById('main-img').src = 'assets/img/image3.png';" onmouseout="document.getElementById('main-img').src = 'assets/img/default.png';" coords="32,384,121,337,103,267,123,186,31,135,2,233,5,314" href="#">
  <area shape="poly" onmouseover="document.getElementById('main-img').src = 'assets/img/image4.png';" onmouseout="document.getElementById('main-img').src = 'assets/img/default.png';" coords="32,384,121,337,103,267,123,186,31,135,2,233,5,314" href="#">
  <area shape="poly" onmouseover="document.getElementById('main-img').src = 'assets/img/image5.png';" onmouseout="document.getElementById('main-img').src = 'assets/img/default.png';" coords="32,384,121,337,103,267,123,186,31,135,2,233,5,314" href="#">
  <area shape="poly" onmouseover="document.getElementById('main-img').src = 'assets/img/image6.png';" onmouseout="document.getElementById('main-img').src = 'assets/img/default.png';" coords="32,384,121,337,103,267,123,186,31,135,2,233,5,314" href="#">
</map>

https://jsfiddle.net/kkjjqfkg/

Answer 1

哟，你可以创建一个css文件并导入它。

img{
  transition: 1s;
}

onmouseover过渡与地图区域与多个图像

1 个答案: