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 Fiddle demo

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

2 个答案: