I have a div that has these characteristics:
div#circulo{
height:200px
width:200px
background-image: url(minhaimagem.png);
background-size:200px;
}
The image in question is a centralized circle with a transparent background. So in my html I put the div to be a link, this way:
<a href="proximapagina.html"><div id=circulo>...conteudo...</div></a>
Only the clickable area was, as expected, in the entire square of the image. Can you make the clickable area just the inner circle ??
Put a border-radius in the link:
a{
border-radius: 50%
}
Note: The dashed area is the "clickable area" of anchor
a div {
width: 120px;
height: 120px;
background: #09f;
border-radius: 50%;
line-height: 120px;
text-align: center;
}
a{
display: inline-block;
border: 1px dashed #333;
padding: 4px;
width: auto;
}
a.com {
border-radius: 50%;
}<h2>Sem o border-radius no link</h2>
<a class="sem" href="proximapagina.html">
<div id=circulo>...conteudo...</div>
</a>
<br><br>
<h2>Com o border-radius no link</h2>
<a class="com" href="proximapagina.html">
<div id=circulo>...conteudo...</div>
</a> Use a map :
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/290px-Flag_of_Japan.svg.png"usemap="#Map" />
<map name="Map">
<area alt="" title="" href="#" shape="poly" coords="146,154,124,150,103,136,91,115,88,88,96,66,110,51,129,40,154,39,176,48,188,56,199,72,204,97,200,118,188,136,167,150,122" />
</map> In the above case I created a shape with the coordinates corresponding to the circle present on the Japanese flag. Also exits the option shape="circle" , but this you can explore further.
It's applied to images, and although the creation might seem complicated, there are some applications for it, such as Dreamweaver itself and sites like this .