我必须为非标准形状的图像实现自定义可点击区域(仅适用于图像的可见部分)。形状是屋顶的一部分。我希望仅在将鼠标悬停在形状上时才能执行单击操作。
请在FIDDLE中查看我的示例,看看我做错了什么以及如何以更好的方式完成?我在选择变换参数以及在形状下方定位可点击区域时遇到问题。如何正确地做,并为所需的形状提供精确的覆盖?
自定义形状:
例子:
<div class="image">
<div class="image_roof_left">
<a class="link_roof_left" href="http://creation.cal24.pl/opencart/index.php?route=product/product&product_id=50"></a>
<img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png">
</div>
</div>
div.image_roof_left {
border: 1px solid;
left: 120px;
top: 10px;
position: absolute;
perspective: 150px;
perspective-origin: 5% 0;
}
a.link_roof_left {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid;
padding: 50px;
position: absolute;
transform: rotateX(82deg) rotateY(-19deg) rotateZ(-6deg) skewX(-63deg) skewY(2deg);
}
正如jme11所建议的,如果使用图像贴图,效果会更好,因为此形状的边是直线。
在图像编辑器中打开图像以找出坐标。
片段:
<img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png" usemap="#map">
<map name="map">
<area shape="poly" coords="0,164,104,132,252,8,252,0,0,164" href="example.com" />
</map>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句