Question

我正在尝试将src图像与id图像交换。从我在其他例子中看到的，我认为这将是实现它的方法。它绝对不适合我。这是我第一次在这里发帖，所以任何帮助格式化我的问题也将非常感谢。

HTML：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Rollovers</title>
    <link rel="stylesheet" href="main.css">
    <script src="rollover.js"></script>
</head>

<body>
    <section>
        <h1>Image Rollovers</h1>
        <ul id="image_rollovers">
            <li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
            <li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
            <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
        </ul>        
    </section>
</body>
</html>

使用Javascript：

//FUNCTION
var $ = function (id) { 
        return document.getElementById(id); 
}       

//MOUSE EVENT FUNCTIONS
var rollover = function(evt) {
    var link = this;
    var imageNode = $("img");
    imageNode.setAttribute("img", link.getAttribute("id"));
}

var rollout = function(evt) {
    var link = this;
    var imageNode = $("id");
    imageNode.setAttribute("id", link.getAttribute("img"));
}

//ONLOAD EVENT HANDLER      
window.onload = function () {

        //GET ALL IMG TAGS
        var linkNode = $("image_rollovers");
        var images = linkNode.getElementsByTagName("img");
        //PROCESS EACH IMAGE
        var i, linkNode, image;
        for ( i=0; i<images.length; i++)
        {
            linkNode = images[i];
            linkNode.onmouseover = rollover;
            linkNode.onmouseout = rollout; 
        }
}

Answer 1

首先，HTML中有拼写错误，您在第三个>末尾错过<img。

        <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
                                                              ^

其次，您正在调用$("img")和$("id")，但没有包含这些ID的元素。您应该将变量设置为link的相应属性。 rollover和rollout不需要不同的功能，因为它们只是交换了id和src属性。

//MOUSE EVENT FUNCTIONS
function swap_src_and_id(evt) {
    var link = this;
    var src = link.getAttribute("src");
    link.setAttribute("src", link.getAttribute("id"));
    link.setAttribute("id", src);
}

第三，您正在致电linkNode.getElementsByTagName("src")，但没有此类标记。它应该是img。

window.onload = function () {

    //GET ALL IMG TAGS
    var linkNode = $("image_rollovers");
    var images = linkNode.getElementsByTagName("img");
    //PROCESS EACH IMAGE
    var i, linkNode, image;
    for ( i=0; i<images.length; i++)
    {
        linkNode = images[i];
        linkNode.onmouseover = swap_src_and_id;
        linkNode.onmouseout = swap_src_and_id; 
    }
}

我试图在javascript中交换图像

1 个答案: