Создание ссылки из картинки с альфа каналом

233

31 марта 2017, 23:40

Добрый день! Подскажите пожалуйста, можно ли как нибудь, средствами HTML5, создать ссылку произвольной формы, в виде кляксы. Есть png фаил с кляксой и прозрачным фоном. Очень хочется что бы при наведении на прозрачный фон, ссылка оставалась неактивной, а как только курсор попадает на кляксу, ссылка становилась активной. Своего рода обработка наличия альфаканала под курсором. Map не подходит, т.к. этих клякс будет много и при наведении они должны будут менять цвет средствами css. Заранее большое спасибо.

Answer 1

Думаю, что кроме ручного вырезания при помощи clip-path в CSS+HTML тут нет вариантов:

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>

Пока экспериментировал с формами, обнаружил интересную возможность обтекать картинки с альфа-каналом при помощи shape-outside: url() (но это не совсем относится к вашему вопросу).

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>