html - 円形の画像でリンクする

Question

私のウェブページには、画像とこの画像へのリンクがあります。

<a href='..'><img src='...' class='img-circle'></a>

(img-circle は Twitter Bootstrap ライブラリの一部です)

リンクが画像上のみ、例えば四角上ではなく円上にあることを望みます。解決策を教えてください。

score 1 · Accepted Answer

次のように、画像にアンカーリンクを作成する必要があります。

#a {
    position:absolute;
    border-radius:100px;
    background-color:#72CEE0;
    width:100px;
    height:100px;
    left:150px;}

そしてHTML：

<div id="a" onclick="window.location='http://whatever.com';"><img src="image.jpg"></div>

円形の画像のサイズ、形状、および位置を一致させるには、上記のleft、width、border-radiusおよびプロパティを変更する必要があります。height

以下は、スタックオーバーフローに関する別の回答の例です。

編集:a href Chrome では onclick に問題があるようですが、この問題の本当の理由はわかりませんが、代わりに次のように単に配置するだけですdiv:

1 に答える 1