文章/答案/技术大牛

发布

社区首页 >问答首页 >我正在尝试用javascript交换图像。

问我正在尝试用javascript交换图像。
EN

Stack Overflow用户

提问于 2017-10-30 21:35:22

回答 1查看 78关注 0票数 0

我正在尝试将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; 
        }
}

javascript

dom-events

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-30 22:12:22

首先，在HTML中有一个错误，在第三个<img的末尾缺少一个<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; 
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47024540

复制

相似问题

问我正在尝试用javascript交换图像。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我正在尝试用javascript交换图像。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我正在尝试用javascript交换图像。
EN