CODEWITHSUNDEEP
htmltwitter-bootstrap
Arnaud
Arnaud

Reputation: 5122

Link in a circular image

In my webpage, I've an image, and a link in this image.

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

(img-circle is part of the Twitter Bootstrap library)

I would like that the link is only on the image, e. g. on the circle, and not on the square. Do you know a solution please ?

Upvotes: 1

Views: 2278

Answers (1)

adaam
adaam

Reputation: 3706

You will need to create an anchor link on the image like so:

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

And the HTML:

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

You will have to modify the left, width, border-radius and height properties above in order to match the size, shape and position of your circular image.

Here is an example from another answer on Stack Overflow:

http://jsfiddle.net/avTa8/

EDIT: It seems that Chrome may have a problem with onclick, although I am not sure what the real reason for this problem is, instead just simply place an a href around the div like this:

http://jsfiddle.net/6UYTL/2/

Upvotes: 1

Related Questions