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

Question

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

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

在这里我想包括：

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

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

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

Answer 1

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

Answer 2

将<img/>包裹在锚点中：

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

点击时交换图片：

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

Answer 3

尝试将图片标记包装为

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

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

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