如何只使图像的可见部分可点击？

时间：2015-08-09 22:47:11

标签： html css responsive-design click clip-path

我不希望图像的透明部分可点击。我找到了＆lt;地图＆gt;但coord是像素，我想做一些响应。 其他问题：我找不到为什么第一张图片的底部和第二张图片的顶部之间有一些像素。

https://jsfiddle.net/tsfxy84u/ 

.container {
	width: 90%;
	margin: 0 auto;
	overflow: auto;	
}

.left {
	float: left;
}

.right {
	float: right;
}

.resize {
	width: 50%;
}

img {
	width: 50%;
}

.two {

	-webkit-clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);

}

.one {

	-webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}
<section class="container">
			
            <a class="two" href="#"><img src="_img/test.png" alt="image test" /></a>
             
			<div class="resize left">
				<h1>Mama mia</h1>
				<p>blabla</p>
			</div>
		</section>
		<section class="container">
			<div class="resize right">
				<h1>Mama mia</h1>
				<p>blabla</p>
			</div>
			
            <a class="one" href="#"><img src="_img/test.png" alt="image test" /></a>
			
		</section>

非常感谢你的帮助。

2 个答案:

答案 0 :(得分：0)

HTML将每个元素都视为由多层（see Box Model）组成的框。

这意味着HTML页面的任何嵌入图像都将被包装在一个方框（正方形）中。因此，当我们用链接标签<img>包装图像标签<a>时，整个image-box将被视为链接（可点击）。

正如您提到的，更改此默认行为的一种方法是使用<map>元素。但是，这不是很“灵活”，也不总是我们案例的最佳解决方案。例如，图像的形状可能具有不规则的形状，从而使它可以为它定义精确的地图。

但是，解决此问题的方法是设计或使用.svg图片文件格式的图片。

HTML 5支持可缩放矢量图形（SVG）格式，并且具有自己的HTML标签<svg>。实际上，这种格式在交互式Web开发中经常使用。简而言之，SVG的关键在于SVG在<svg>标签内以矢量形式将图像中的不同形状分组。

获得.svg图片后，要使它在实际存在图片的确切位置上可点击即可，我们可以按照以下简单步骤进行操作（还有其他方法） ：

  • 使用文本编辑器打开.svg图片。
  • 复制<svg>标签及其所有嵌套元素。
  • 将<svg>标签粘贴到HTML文档的正文中。
  • 在最里面的嵌套<a>标记内添加<g>标记。

完成！

您应该根据需要拥有一个“完全”可点击的图像。对于JSFiddle游乐场，click here。

这是一个简短的摘要：

<body>

  <!-- The SVG tag below was copied exactly as is from our .svg file -->
  <!-- Then added the <a> tag inside the inner-most nested <g> tag -->
  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#000000" stroke="none">
      <!-- The <a> tag we've added -->
      <a href="https://mojly.com/wp-content/uploads/2017/10/hilarious-animal-pics-01-animals-with-human-teeth.jpg">
        <path d="M4390 5952 c-113 -53 -289 -221 -427 -409 -84 -114 -98 -125 -153
-117 -171 27 -523 -80 -714 -217 l-98 -71 -97 71 c-186 137 -427 215 -661 215
l-115 0 -91 123 c-228 310 -551 543 -524 378 5 -30 19 -167 31 -305 12 -137
30 -281 40 -318 17 -66 13 -74 -119 -213 -336 -354 -415 -830 -210 -1265 l50
-106 -38 -104 c-235 -632 -120 -1587 226 -1874 64 -53 11 -59 -607 -64 l-636
-6 -79 -55 c-242 -167 -208 -515 61 -637 75 -34 153 -37 1058 -38 l977 0 -13
-75 c-25 -132 -109 -254 -295 -425 -213 -197 -351 -454 -221 -414 553 173 689
197 799 139 298 -158 287 -155 466 -155 179 0 168 -3 466 155 110 58 246 34
799 -139 130 -40 -8 217 -221 414 -186 171 -270 293 -295 425 l-13 75 977 0
c905 1 983 4 1058 38 269 122 303 470 61 637 l-79 55 -636 6 c-618 5 -671 11
-607 64 346 287 461 1244 225 1877 l-39 107 51 103 c208 416 127 909 -208
1262 -135 141 -136 144 -120 222 10 43 27 178 39 299 13 121 27 258 32 305 5
47 7 85 5 85 -3 0 -50 -22 -105 -48z m-1960 -899 c250 -67 549 -348 550 -518
0 -19 9 -35 20 -35 11 0 20 16 20 35 1 170 300 451 550 518 734 196 1249 -740
706 -1280 -233 -231 -581 -286 -874 -138 -71 36 -130 63 -132 60 -2 -3 -61
-115 -132 -250 -70 -135 -132 -245 -138 -245 -6 0 -68 110 -138 245 -71 135
-130 247 -132 250 -2 3 -61 -24 -132 -60 -297 -151 -682 -79 -905 167 -500
553 23 1441 737 1251z m-55 -3239 c25 -23 45 -55 45 -72 0 -19 25 -1 61 43 78
95 190 105 270 26 47 -47 49 -60 49 -311 0 -251 -2 -264 -49 -311 -80 -79
-192 -69 -270 26 -40 49 -61 63 -61 41 0 -104 -198 -150 -294 -68 l-56 49 0
260 c0 246 3 262 47 310 75 79 175 82 258 7z m1146 -31 c36 -44 59 -60 59 -41
0 114 205 162 298 70 51 -52 52 -59 52 -314 l0 -261 -56 -49 c-93 -80 -294
-37 -294 63 0 16 -9 29 -20 29 -11 0 -20 -11 -20 -24 0 -108 -203 -155 -291
-67 -54 55 -75 504 -27 594 57 108 210 108 299 0z" />
        <path d="M2090 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
        <path d="M3590 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
      </a>
    </g>
  </svg>
</body>

更多SVG示例（Here is a good one）

答案 1 :(得分：0)

跳出框框思考：

  1. 如果在点击坐标处，像素的Alpha通道是透明的（0）-暂时隐藏该图像，然后获取下一个elementFromPoint(x, y)←REPEAT•1
  2. 如果Alpha 不透明-获取该图像数据并显示所有临时隐藏的图像。
  3. 如果目标不是IMG-显示所有隐藏的图像（未单击可见的图像像素）

const ctx = document.createElement("canvas").getContext("2d");
let stack = [];

function transPNG(ev, target) {
  if(!target.offsetParent) return;

  // Get click coordinates
  const isImage = /img/i.test(target.tagName),
    x = ev.pageX - target.offsetParent.offsetLeft,
    y = ev.pageY - target.offsetParent.offsetTop,
    w = ctx.canvas.width = target.width,
    h = ctx.canvas.height = target.height;
  let alpha;

  // Draw image to canvas and read Alpha channel value
  if (isImage) {
    ctx.drawImage(target, 0, 0, w, h);
    alpha = ctx.getImageData(x, y, 1, 1).data[3]; // [0]R [1]G [2]B [3]A
  }

  if (alpha === 0) {          // If pixel is transparent...
    target.hidden = 1         // Make image hidden
    stack.push(target);       // Remember
    return transPNG(ev, document.elementFromPoint(ev.clientX, ev.clientY)); // REPEAT
  } else {                    // Not transparent! We found our image!
    stack.forEach(el => (el.hidden = 0)); // Show all hidden elements
    stack = [];               // Reset stack
    console.clear(); console.log(target.getAttribute("alt"));
    // document.location = target.dataset.href; // if you want to navigate to HREF
  }
}

const pngs = document.querySelectorAll("#composite img");
[...pngs].forEach(img =>img.addEventListener("click", ev => transPNG(ev, ev.currentTarget)));
#composite { position: relative; width: 60px; height: 60px;}
#composite img { position: absolute; top: 0; }
Three overlapping PNG images. Click to explore:<br>
<div id="composite">
  <img alt="Red paint" data-href="page3.html" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzczNTY0QjREQkExMTFFOThDNjBEQUI0RjNDMzI4QTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzczNTY0QjVEQkExMTFFOThDNjBEQUI0RjNDMzI4QTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NzM1NjRCMkRCQTExMUU5OEM2MERBQjRGM0MzMjhBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NzM1NjRCM0RCQTExMUU5OEM2MERBQjRGM0MzMjhBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ptm+qYEAABGFSURBVHja7FpLj13Z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"/>
  <img alt="Black birds" data-href="page2.html" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUNBRTlGOEJEQkExMTFFOUE0N0Q4RDZBRkE1MTUwMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUNBRTlGOENEQkExMTFFOUE0N0Q4RDZBRkE1MTUwMzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5Q0FFOUY4OURCQTExMUU5QTQ3RDhENkFGQTUxNTAzMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5Q0FFOUY4QURCQTExMUU5QTQ3RDhENkFGQTUxNTAzMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpqX8YAAAAZ/SURBVHja7FppbFRV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"/>
  <img alt="Cute bird" data-href="page1.html" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjFCNUZDMjdEQkExMTFFOUI5NDU4N0RBRkNBNjJCQkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjFCNUZDMjhEQkExMTFFOUI5NDU4N0RBRkNBNjJCQkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MUI1RkMyNURCQTExMUU5Qjk0NTg3REFGQ0E2MkJCQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MUI1RkMyNkRCQTExMUU5Qjk0NTg3REFGQ0E2MkJCQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlUbcQUAABl5SURBVHja5Ht5rF31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"/>
</div>

以上演示仅适用于未经转换的1：1（使用CSS object-fit，浏览器调整大小等）图像。如果是这种情况，则应考虑改进在画布上绘制确切图像尺寸/位置的逻辑。

相关问题
最新问题