Round Image Link

Question

Я создаю веб-сайт, и я хотел бы добавить ссылку на страницу facebook. Дизайнер прислал мне круглое изображение, чтобы представить ссылку на facebook. Собственно, изображение представляет собой прямоугольник, но картина круглая. То, что я хочу, - это указатель на переход к «линии связи» только тогда, когда над круглой областью изображения. я мог бы частично добиться того, что с этим:

.imgFacebook {  
    border-radius:50%; 
    height:50px;  
} 

Однако результат я получаю: он работает на верхней стороне изображения. В верхней части, когда я перемещаю мышь вне раунда, указатель возвращается к стрелке. Нижняя сторона все еще рассматривает изображение как квадратное изображение и меняет указатель за круглым дизайном на «руку», представляющую ссылку. Я попытался установить радиус границы отдельно для каждого угла (сверху-слева/справа и внизу слева/справа), без успеха. Итак, кто-нибудь знает, как я могу получить круглую область на моем изображении в качестве ссылки? Заранее спасибо

Answer 1

После некоторых поисков с использованием разных ключевых слов я смог найти «как» в этой ссылке. http://jsfiddle.net/6UYTL/2/ Мне просто нужно было добавить изображение внутри div. Что касается изображения, то я использовал какой-то стиль, чтобы он отображался вокруг.

<a href="http://www.wherelionsroam.co.uk" target="_blank"> 
    <div id="a"> 
     <asp:Image ID="imgLinkFacebook" runat="server" CssClass="imgFacebook"/> 
    </div> 
</a> 

.imgFacebook {  
    border-radius:50%; 
    height:50px;  
} 

В любом случае, спасибо.