如何在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;
}

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>