How to add anchor tag to the img tag in html?

Question

I want to include anchor tag inside img tag in html.

<img src="img.jpg" alt="no img" />

inside this i want to include:

<a onclick="retake();" > Retake </a>

Actually by clicking retake i want to take a different photo for that photo.

How to include a inside img? any help?

Answer 1

An img element cannot contain any other content, whether HTML elements or even text-nodes. The closest you can come is to wrap the img with an a :

<a onclick="retake();"> Retake <img src="img.jpg" alt="no img" /></a>

Although there is the possibility to wrap the img with another element, say a span , and have the a as a sibling:

<span>
    <img src="img.jpg" alt="no img" />
    <a onclick="retake();"> Retake </a>
</span>

And use CSS to position it over the element (so visually-'within'):

span {
    position: relative;
}
span a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JS Fiddle demo .

Answer 2

Wrap the <img/> in the anchor:

<a onclick="retake();" title="Retake"><img src="img.jpg" alt="no img" /> Retake</a>

To swap the image on click:

function retake()
{
    this.getElementsByTagName('img')[0].src = "newimage.jpg";
}

Answer 3

Try to wrap the image tag like

<a onclick="retake();"> Retake <img src="img.jpg" alt="no img" /></a>

or you can put the image before text like

<a onclick="retake();"> <img src="img.jpg" alt="no img" /> Retake </a>