Good day! Please tell me, is it possible to create a link of arbitrary shape in the form of blots using HTML5 tools? There is a png file with a blot and a transparent background. I really want that when you hover on a transparent background, the link remains inactive, and as soon as the cursor hits a blob, the link becomes active. A kind of processing the presence of alphakanal under the cursor. Map is not suitable, because There will be a lot of these blots and when hovering they will have to change color using css. Thanks a lot in advance.

  • And the option of drawing the blot itself on canvas is not considered? - smellyshovel
  • Considered, but I wanted to ease the task as much as possible) - Dmitry Savenko

1 answer 1

I think that besides manual cutting with the help of the clip-path in CSS + HTML there are no options here:

 a { width: 200px; height: 200px; display: block; transition: filter .2s; background-image: url("http://i.imgur.com/I8vzVYn.png"); -webkit-clip-path: polygon(23% 23%, 42% 29%, 48% 19%, 59% 15%, 63% 28%, 70% 30%, 90% 28%, 85% 53%, 93% 66%, 86% 74%, 71% 69%, 67% 81%, 58% 89%, 47% 82%, 28% 81%, 18% 83%, 13% 74%, 19% 65%, 10% 55%, 6% 35%); clip-path: polygon(23% 23%, 42% 29%, 48% 19%, 59% 15%, 63% 28%, 70% 30%, 90% 28%, 85% 53%, 93% 66%, 86% 74%, 71% 69%, 67% 81%, 58% 89%, 47% 82%, 28% 81%, 18% 83%, 13% 74%, 19% 65%, 10% 55%, 6% 35%); } a:hover { filter: hue-rotate(180deg); } 
 <a href="#link"></a>

While experimenting with forms, I found an interesting opportunity to wrap around images with an alpha channel using shape-outside: url() (but this does not really apply to your question).

 a { width: 200px; height: 200px; display: block; transition: filter .2s; background-image: url("http://i.imgur.com/I8vzVYn.png"); } a:hover { filter: hue-rotate(180deg); } .shape { shape-outside: url("http://i.imgur.com/I8vzVYn.png"); shape-margin: 10px; float: left; } .shape--right { float: right; } 
 <div> <a class="shape"></a> <a class="shape shape--right"></a> <p>بال والقرى والكساد للإتحاد عن, ذات ان اتّجة وفرنسا الاندونيسية. وتم لعدم الشتاء، الحكومة بـ, حدى كل ساعة الشتاء الضروري. حاول صفحة غريمه قد فعل, من حيث بالرّغم اليابانية, دول معقل إبّان والنفيس عن. لأداء قُدُماً عن بحق. وترك فكان الإقتصادي كلّ عل, أراض والقرى المعاهدات بـ بحث. </p> <p>بال والقرى والكساد للإتحاد عن, ذات ان اتّجة وفرنسا الاندونيسية. وتم لعدم الشتاء، الحكومة بـ, حدى كل ساعة الشتاء الضروري. حاول صفحة غريمه قد فعل, من حيث بالرّغم اليابانية, دول معقل إبّان والنفيس عن. لأداء قُدُماً عن بحق. وترك فكان الإقتصادي كلّ عل, أراض والقرى المعاهدات بـ بحث. </p> <p>بال والقرى والكساد للإتحاد عن, ذات ان اتّجة وفرنسا الاندونيسية. وتم لعدم الشتاء، الحكومة بـ, حدى كل ساعة الشتاء الضروري. حاول صفحة غريمه قد فعل, من حيث بالرّغم اليابانية, دول معقل إبّان والنفيس عن. لأداء قُدُماً عن بحق. وترك فكان الإقتصادي كلّ عل, أراض والقرى المعاهدات بـ بحث. </p> </div>

  • Thank you very much! Exactly what was needed. And that was mostly difficult options with connecting js. - Dmitry Savenko