javascript - Javascript：如何将 Javascript 图像链接到页面？

Question

我对 Javascript 很陌生，我正在制作一个 HTML 网站。

由于我是 Javascript 新手，我不知道如何显示图像，并且当单击图像时将其链接到页面。

我知道如何在 HTML 中做到这一点，但是由于我的免费主机，如果我不对有多少图像（我会做很多）或它链接到的位置（将显示在每一页上）我需要浏览每一页。

我需要做的就是在同一个选项卡上打开页面。

Answer 1

尝试这个：

var img = new Image();
img.src = 'image.png';
img.onclick = function() {
    window.location.href = 'http://putyourlocationhere/';
};
document.body.appendChild(img);

Answer 2

在没有更多信息的情况下，我将把它作为一种相对跨浏览器的方法来提供，它将附加一个img包裹在一个元素中的a元素。这适用于以下（简单）HTML：

<form action="#" method="post">
    <label for="imgURL">image URL:</label>
    <input type="url" id="imgURL" />
    <label for="pageURL">page URL:</label>
    <input type="url" id="pageURL" />
    <button id="imgAdd">add image</button>
</form>

以及以下 JavaScript：

// a simple check to *try* and ensure valid URIs are used:
function protocolCheck(link) {
    var proto = ['http:', 'https:'];

    for (var i = 0, len = proto.length; i < len; i++) {
        // if the link begins with a valid protocol, return the link
        if (link.indexOf(proto[i]) === 0) {
            return link;
        }
    }

    // otherwise assume it doesn't, prepend a valid protocol, and return that:
    return document.location.protocol + '//' + link;
}

function createImage(e) {
    // stop the default event from happening:
    e.preventDefault();
    var parent = this.parentNode;

    /* checking the protocol (calling the previous function),
       of the URIs provided in the text input elements: */
    src = protocolCheck(document.getElementById('imgURL').value);
    href = protocolCheck(document.getElementById('pageURL').value);

    // creating an 'img' element, and an 'a' element
    var img = document.createElement('img'),
        a = document.createElement('a');

    // setting the src attribute to the (hopefully) valid URI from above
    img.src = src;

    // setting the href attribute to the (hopefully) valid URI from above
    a.href = href;
    // appending the 'img' to the 'a'
    a.appendChild(img);
    // inserting the 'a' element *after* the 'form' element
    parent.parentNode.insertBefore(a, parent.nextSibling);
}

var addButton = document.getElementById('imgAdd');

addButton.onclick = createImage;

JS 小提琴演示。