javascript - 如何将锚标签添加到html中的img标签？

Question

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

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

在这里面我想包括：

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

实际上，通过单击重拍，我想为那张照片拍一张不同的照片。

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

score 2 · Accepted Answer

一个img元素不能包含任何其他内容，无论是 HTML 元素还是文本节点。最接近你的方法是img用一个包裹a：

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

虽然有可能img用另一个元素包装 a ，比如 a span，并将 thea作为兄弟：

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

并使用 CSS 将其定位在元素上（因此在视觉上-'内部'）：

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

score 0 · Accepted Answer

包裹<img/>在锚点中：

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

要在单击时交换图像：

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

score 0 · Accepted Answer

尝试像这样包装图像标签

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

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

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

3 回答 3