如何将图像分成可悬浮的子部分？

Question

是否有办法只将鼠标悬停在该头部的彩色区域的确切尺寸上（而不是盒子模型的多余角）？

如果我正在创建一个网站，可以将鼠标悬停在人体各部分上，然后单击以获取有关单击部分的信息，那么我是否必须将身体与各个div拼凑在一起，或者是否有更好的方法来划分图像进入悬停的可选部分？ （不确定我是否使用了正确的术语！）

我只想重申一下，我只希望能够选择准确尺寸的彩色区域（而不是彩色部分外部/盒子模型外部的空白区域）。有什么建议吗？

Answer 1

也许<map> / <area>元素可能会有所帮助：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Answer 2

HTML <map>标签是您要寻找的。

  

图像地图是具有可点击区域的图像。

     

该元素的必需name属性与   的usemap属性，并在   图片和地图。

     

该元素包含许多元素，这些元素定义了   图片地图中的可点击区域。

您可以获取详细的逐步指南HERE和一些详细的说明HERE。

Answer 3

如果您的图片仅由严格的矩形组成，那么会有更简单的选择。

无论如何，您可以将图像加载到Illustrator等矢量绘图应用程序中，并手动跟踪形状的轮廓。完成后，将图形导出为.svg。 如果查看svg文件，您会看到各个形状都存储为标签。例如：

<path fill="#44CACF" d="M42.124,213.07l64.5-1l-1.5,66l-51.5,35C53.624,313.07,14.124,246.57,42.124,213.07z"/>

如果您为它们提供 id 属性

<path fill="#44CACF" id="partC" d="M42.124,213.07l64.5-1l-1.5,66l-51.5,35C53.624,313.07,14.124,246.57,42.124,213.07z"/>

您可以使用javascript访问它，并根据需要添加鼠标事件。

这是一个例子：

function enter(e) {
  e.target.style.opacity = 0.5;
}

function leave(e) {
  e.target.style.opacity = 1;
}

document.getElementById("partA").addEventListener("mouseenter", enter);
document.getElementById("partB").addEventListener("mouseenter", enter);
document.getElementById("partC").addEventListener("mouseenter", enter);
document.getElementById("partD").addEventListener("mouseenter", enter);
document.getElementById("partE").addEventListener("mouseenter", enter);

document.getElementById("partA").addEventListener("mouseleave", leave);
document.getElementById("partB").addEventListener("mouseleave", leave);
document.getElementById("partC").addEventListener("mouseleave", leave);
document.getElementById("partD").addEventListener("mouseleave", leave);
document.getElementById("partE").addEventListener("mouseleave", leave);

<svg version="1.0" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="247.741" height="344.813" viewBox="0 0 247.741 344.813" overflow="visible" enable-background="new 0 0 247.741 344.813" xml:space="preserve">
<path fill="#CF454B" id="partA" d="M14.624,131.57c0,0-2-44,13.5-67s32.5-39,55-45.5s40-7.5,55.5-5s36,4,46,12.5s30,30,36.5,39
	s15.5,26.5,15.5,35.5s2.5,15,0.5,19.5s-15.5,14-21,15s-201.5,2-201.5,2V131.57z"/>
<path fill="#7F45CF" id="partB" d="M14.124,140.07l203-2.5c0,0,17-9,20-12.5s0.5,11.5,0.5,11.5l-4.5,18l-5.5,23.5l-15,29.5l-170,2.5
	C42.624,210.07,5.624,178.57,14.124,140.07z"/>
<path fill="#44CACF" id="partC" d="M42.124,213.07l64.5-1l-1.5,66l-51.5,35C53.624,313.07,14.124,246.57,42.124,213.07z"/>
<path fill="#44CACF" id="partD" d="M142.124,211.57l70.5-0.5c0,0,1.5,88.5-20,104.5s-25-42-51-56L142.124,211.57z"/>
<path fill="#45CE7C" id="partE" d="M108.624,213.57l-1.5,63.5l-53.5,36c0,0,49.5,57.5,124.5,10c0,0-13-23.5-17-32.5s-20.5-24.5-22.5-26
	s2-49.5,2-49.5"/>
<g>
	<g>
		<path fill="none" d="M59.624,333.57c-9-11.5-17-22-23-35.5c-2.5-5.5-5-11.5-6.5-17.5c-0.5-3-0.5-7-2-9.5c-1.5-5-6.5-7.5-9.5-12.5
			c-7.5-12.5-22-47.5-15.5-62c3.5-7.5,12.5-5,14.5-13c2-7.5-5.5-17-6.5-24.5c-1-10.5,0-21.5,0-32c0-10-1.5-21,0-31
			c2.5-19,20-37.5,31.5-52c11.5-15,27-23.5,44.5-31c13-5.5,28-10.5,42-11.5c10-0.5,19.5,3.5,29,6c20,5.5,38,12,52,28
			c13,15.5,21,31,27,50c5,17,10.5,33.5,9,51.5c-2,19.5-16.5,33-21,51.5c6.5,2.5,12.5-1.5,16,6.5c2.5,6.5,0,17-1,23.5
			c-1.5,9-2.5,19.5-6.5,27.5c-5,10-14.5,16-19.5,26c-7.5,15.5-1.5,35.5-16.5,47.5c-11.5,9-28.5,13.5-42,18.5c-17,5.5-34,5-52,5
			c-15,0-32-0.5-44.5-10.5"/>
		<path d="M60.762,332.604c-9.078-11.613-17.466-23.343-23.539-36.839c-3.107-6.904-5.255-13.645-6.37-21.11
			c-0.841-5.631-4.562-9.469-8.302-13.416c-6.492-6.854-10.047-17.929-13.238-26.606c-3.649-9.927-7.015-21.035-6.2-31.732
			c0.423-5.549,2.972-8.828,7.999-11.088c3.796-1.707,6.611-3.603,7.912-7.725c1.328-4.208-0.39-8.836-1.904-12.738
			c-1.039-2.677-2.266-5.276-3.301-7.955c-1.67-4.322-1.583-8.987-1.648-13.553c-0.107-7.544,0.4-15.087,0.439-22.631
			c0.042-7.941-0.794-15.854-0.619-23.801c0.327-14.881,7.469-27.208,16.122-38.86c7.877-10.607,16.325-22.004,26.267-30.735
			c10.153-8.917,22.654-14.903,35.021-20.081c14.179-5.937,30.953-12.106,46.565-10.361c7.387,0.826,14.504,3.658,21.641,5.597
			c6.507,1.769,12.952,3.758,19.259,6.148c12.759,4.834,24.456,12.177,33.223,22.746c8.938,10.775,15.94,22.884,21.225,35.825
			c5.654,13.847,9.963,28.944,12.437,43.696c1.249,7.448,1.627,15.179,0.458,22.656c-1.124,7.188-4.419,13.957-7.797,20.319
			c-4.792,9.026-10.096,17.707-12.687,27.692c-0.198,0.763,0.053,1.646,0.882,1.917c3.994,1.309,8.962,0.2,12.6,2.284
			c5.723,3.278,3.348,14.424,2.539,19.606c-1.952,12.5-2.695,26.565-9.734,37.418c-6.213,9.581-15.568,16.064-19.245,27.304
			c-3.225,9.854-2.545,20.52-5.956,30.342c-4.303,12.391-17.536,17.938-28.839,22.344c-12.355,4.817-25.046,9.401-38.232,11.149
			c-13.678,1.813-27.839,1.399-41.609,1.084c-12.773-0.292-25.747-2.187-36.148-10.153c-1.531-1.172-3.236,1.277-1.712,2.445
			c9.989,7.649,22.168,9.926,34.471,10.567c13.874,0.724,28.131,0.622,41.97-0.614c13.793-1.232,26.558-5.946,39.475-10.632
			c10.981-3.983,23.473-8.927,30.333-18.921c5.991-8.729,5.857-20.339,7.578-30.378c1.116-6.509,3.493-12.179,7.467-17.46
			c4.03-5.354,9.028-9.867,12.893-15.365c7.248-10.313,7.711-24.044,9.79-36.05c1.379-7.964,4.44-22.313-5.488-26.183
			c-3.481-1.357-7.519-0.41-11.113-1.587c0.294,0.639,0.588,1.278,0.881,1.917c3.188-12.286,10.521-22.688,15.877-34.045
			c5.766-12.226,6.275-24.966,4.288-38.176c-2.108-14.005-6.555-28.165-11.494-41.417c-4.563-12.247-10.906-23.686-18.659-34.191
			c-7.413-10.045-16.488-18.284-27.638-24.006c-11.763-6.036-24.382-9.234-36.968-13.017c-6.304-1.895-12.56-3.687-19.155-4.15
			c-7.216-0.506-14.777,1.344-21.713,3.096C97.538,6.597,84.376,12.106,72.02,18.524c-10.839,5.629-20.65,12.879-28.608,22.182
			C34.829,50.739,26.2,61.18,19.102,72.324c-7.223,11.34-10.278,22.922-10.105,36.327c0.095,7.343,0.71,14.653,0.604,22.003
			c-0.111,7.689-0.652,15.384-0.306,23.075c0.272,6.046,1.634,10.702,4.006,16.22c2.646,6.154,5.938,14.373-1.634,18.324
			c-3.538,1.846-6.774,2.956-9.169,6.337c-2.165,3.056-2.443,7.521-2.493,11.111c-0.136,9.845,2.954,19.747,6.165,28.942
			c2.935,8.405,6.375,17.402,11.316,24.872c3.981,6.018,9.499,9.415,10.644,17.082c1.08,7.229,3.453,13.727,6.397,20.428
			c6.045,13.762,14.749,25.707,23.959,37.49C59.671,336.053,61.946,334.12,60.762,332.604L60.762,332.604z"/>
	</g>
</g>
</svg>