Javascript：如何创建指向页面的Javascript图像链接？

我对Javascript非常陌生，我正在制作一个HTML网站

由于我不熟悉Javascript，我不知道如何显示图像，当单击图像时，将其链接到页面

我知道如何在HTML中实现，但由于我的免费主机，如果我不想对图像的数量（我会做很多）或链接的位置（将显示在每个页面上）进行一次更改，我将需要浏览每个页面

---

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

在没有更多信息的情况下，我将提供一种相对跨浏览器的方法，它将附加一个封装在

a

元素中的

img

元素。这适用于以下（简单）HTML：

图像URL:
页面URL:
添加图像

以及以下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;

//一个简单的检查*try*并确保使用了有效的URI：
函数协议检查（链接）{
var proto=['http:'，'https:']；
for（变量i=0，len=proto.length；i

---

.

在没有更多信息的情况下，我将提供一种相对跨浏览器的方法，它将附加一个封装在

a

元素中的

img

元素。这适用于以下（简单）HTML：

图像URL:
页面URL:
添加图像

以及以下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;

//一个简单的检查*try*并确保使用了有效的URI：
函数协议检查（链接）{
var proto=['http:'，'https:']；
for（变量i=0，len=proto.length；i

.

试试这个：

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

试试这个：

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

---

如果你有一些代码，告诉它你有什么最小的html（足以演示你的问题页面），在什么情况下你想用JavaScript添加新的html？你想添加什么精确的html？关于A标签的链接，而不是图像本身。如果你有一些代码，告诉它你有什么最小的html（足以演示你的问题页面），在什么情况下你想用JavaScript添加新的html？你想添加什么精确的html？关于A标签的链接，而不是图像本身。这是一个很好的形式，这项工作。但它的缺点是鼠标悬停在链接上时不改变光标。要查看光标，最好先创建一个元素，然后将图像添加到其中。最后将元素添加到文档中。这项工作。但它的缺点是鼠标悬停在链接上时不改变光标。要查看光标，最好先创建一个元素，然后将图像添加到其中。最后将元素添加到文档中。