html / css прозрачность в ссылке на изображение не кликабельна

Question

У меня есть .png изображение звезды. Область вокруг звезды прозрачна. Вот пример моего кода

<a href='nextPage.html'><img src='starImage.png' border='0'></a>

Как получить кликабельную только звездную часть изображения? -или же- Как сделать так, чтобы прозрачные части изображения не были кликабельными?

Answer 1

Вам нужно использовать карту формы области

<a href='nextPage.html'><img src='starImage.png' border='0'usemap="#Map" /></a>
<map name="Map" id="Map">
  <area shape="poly" coords="54,52,55,52,94,77,118,42,179,63,174,119,105,128,50,122,31,84,54,53" href="#" />
</map>

Это только пример.Вы должны использовать инструмент карты формы области на Dreamweaver и нарисовать многоугольник нужной вам области.

Answer 2

вам нужно использовать карту изображений, проверьте этот сайт, чтобы помочь вам сделать это ... http://www.image -maps.com /

Для получения дополнительной информации о том, что такое карта изображений, см. Эту статью в Википедии. Карта изображений

Answer 3

Фактически мы можем сделать положение родительского элемента: относительным и использовать z-index для размещения области ссылки над изображением.

Что-то вроде:

div.imageArea {
    position: relative;
    width: 150px;
    height: 150px;
    z-index: 2;
}
div.imageArea a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;        
    background: transparent no-repeat url('images/starImage.png') 0 0;
    z-index: 3;
}