问题
I don't want the transparent part of the images to be clickable.
I found <map> but the coordinates are in pixels and I want to do something responsive.
Another problem: I can't find why there is some pixels between the bottom of the first picture and the top of the second picture.
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>Thanks a lot for your help.
回答1:
Think out of the box:
- If at the click coordinates the pixel Alpha channel is transparent (
0) - temporarily hide that image, and get the nextelementFromPoint(x, y)← REPEAT •1 - If Alpha is not transparent - get that image data and show all temporarily hidden images.
- If Target is not IMG - show all hidden images (no visible image pixel was clicked)
PS: instead of Element.hidden we could use CSS's pointer-events: "[none, auto]"
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>The above demo only works for 1:1 untransformed (using CSS object-fit, browser-resized, etc.) images. If that's your case than you should consider to improve the logic for painting the exact image size/position onto the canvas.
回答2:
HTML treats every element as a box that is made up of several layers (see Box Model).
This means any embedded image to an HTML page will be wrapped within a box (square). Therefore, when we wrap an image tag <img> with a link tag <a>, the entire image-box will be treated as a link (clickable).
As you mentioned, one way to change this default behavior is by using <map> element. But, this is not very "flexible" and not always the best solution for our case. For example, an image could be shaped with an irregular shape that makes it herder to define a precise map for it.
However, the solution for this problem is to design or use images under .svg image file format.
Scalable Vector Graphics (SVG) format is supported by HTML 5 and has its own HTML tag <svg>. This format is, in fact, used a lot in interactive web development. The key to SVG, in simple terms, is that SVG groups the different shapes within an image in a vector form inside the <svg> tag.
After we have our .svg image that we want to make clickable exactly where there is actually an image, we can follow the simple steps below (there are other ways to do it):
- Open your
.svgimage with a text editor. - Copy the
<svg>tag and all its nested elements. - Paste the
<svg>tag into the HTML document's body. - Add the
<a>tag inside the inner-most nested<g>tag.
DONE!
You should have a "perfectly" clickable image as you desired. For JSFiddle playground, click here.
Here is a quick snippet:
<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>More SVG Examples (Here is a good one)
来源：https://stackoverflow.com/questions/31909577/click-through-transparent-image-pixel