javascript - HTMLのimgタグにアンカータグを追加するには?

Question

HTMLのimgタグ内にアンカータグを入れたい。

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

この中に私は含めたい：

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

実際には、再撮影をクリックして、その写真とは別の写真を撮りたいと思っています。

内部の img を含める方法は? 助けはありますか？

score 2 · Accepted Answer

要素には、HTML 要素であろうとテキストノードであろうと、他のコンテンツをimg含めることはできません。あなたが来ることができる最も近いものは、でラップすることimgですa：

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

imgを別の要素でラップする可能性はありますが、たとえば、 a を兄弟としてspan持つことができます。a

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

3 に答える 3