如何在html中将锚标记添加到img标记中?

时间:2013-06-10 06:35:33

标签: javascript jquery html

我想在html中的img标记中包含锚标记。

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

在这里我想包括:

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

实际上,点击重拍我想为该照片拍摄不同的照片。

如何包含内部img?有什么帮助吗?

3 个答案:

答案 0 :(得分:2)

img元素不能包含任何其他内容,无论是HTML元素还是文本节点。您最接近的是用img包裹a

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

虽然可以将img与另一个元素包起来,比如说span,并让a作为兄弟:

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

并使用CSS将其放置在元素上(因此在视觉上''inin'):

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

JS Fiddle demo

答案 1 :(得分:0)

<img/>包裹在锚点中:

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

点击时交换图片:

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

答案 2 :(得分:0)

尝试将图片标记包装为

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

或者您可以将图像放在文本之前,如

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