CODEWITHSUNDEEP
javascriptjqueryhtml
SSS
SSS

Reputation: 1430

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

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?

Upvotes: 0

Views: 7370

Answers (3)

GautamD31
GautamD31

Reputation: 28763

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>

Upvotes: 0

MrCode
MrCode

Reputation: 64526

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";
}

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 2

Related Questions