Why my image hyperlink clickable from a large marg

Question

The box around the picture is the actual size of the picture. The picture is clickable from all the way on the ends of both sides. This occurs more than once on our site, so it is a trend of something, I just cant figure out what. I want just the picture itself to be clickable

<hr noshade>
<a href="website.html">
<center> <img src="torqafflogo.png" alt="homepage" align=center height="215" width="215" border="0"> </center>
</a>
<hr noshade>

Answer 1

Unless you get the original images clipped (through Photoshop or such tool), here's what you can do -

1.Put these images in a container. Eg -

<span class="roundImageWrapper"><img src="torqafflogo.png"  alt="homepage" /></span>

2.Apply style to the surrounding wrapper element

.roundImageWrapper{
   position : relative;
   height : 100px;
   width : 100px;
   border-radius : 50%; /*Make it round*/
   -moz-border-radius : 50%;
   overflow : hidden; /*clip anything outside the circle*/
}

3.Position image inside .roundImageWrapper using appropriate values for top and left as per need -

.roundImageWrapper img{
   position : absolute;
   top : 0; /* Adjust as per need*/
   left : 0; /* Adjust as per need*/
}

This will be easy if all these said images have similar dimensions. Otherwise, you'll have to style the individual images to adjust position.

4. Lastly, bind the click event on the roundImageWrapper instead of on the image.