javascript - 在链接上单击带有文本的新图像

Question

我正在尝试创建一个页面，当单击链接时，会出现相应的图像，其下方有一个可单击的链接，上面写着“单击以查看图库”

到目前为止，我已经编写了使用“onclick”命令更改图像的代码，但我不确定如何在图像下方添加文本。

这里是my website现在使用当前代码。

JS:

function changeImage(element) {
document.getElementById('imageReplace').src = element;
}

HTML:

<a href="#/" onclick="changeImage('IMAGE001');">1025 W 3rd</a>
<a href="#/" onclick="changeImage('IMAGE002');">959 - 965 Schrock Rd</a>
<a href="#/" onclick="changeImage('IMAGE003');">7099 Huntley Rd</a>

因此，我需要在图像下方添加“点击查看属性(property)图库”的文本。该链接必须是一个唯一的链接，可根据用户在左栏中选择的“onclick”链接引导至相应的属性。

例如，用户在左栏中选择1025 W 3rd，则会显示相应的图像，并提供一个选项，供用户单独查看该属性的图库(这将是一个单独的属性)网页)

我不确定我的下一步应该是什么。更改链接和“onclick Change div”类型的命令是否更好？

非常感谢您的帮助。

-卡斯

编辑 我添加了当前的代码，以便任何读者都可以更好地理解我当前拥有的内容。

Answer 1

您需要在图片下方添加一个链接并为其添加一个 ID。

<div id="divright">
    <img src="http://new.oxrealty.com/wp/wp-content/uploads/2015/08/CommercialPropertiesDef.png" alt="Images" id="imageReplace">
    <a href="#" id="linkReplace">Click to view Gallery</a>
</div>

然后更改您的函数 changeImage 以接受链接的附加参数，并且它还应该更改链接的 href 属性。

function changeImage(image, link) {
    document.getElementById('imageReplace').src = image;
    document.getElementById('linkReplace').href = link;
}

然后更改链接以使用链接调用更新后的函数

onclick="changeImage('CUSTOM_IMAGE', 'CUSTOM_LINK');"

Example jsfiddle