设为首页 | 加为收藏 | 联系我们 咨询热线:0632-5272123
电 话:0632-5272123
传 真:0632-5271123
地 址: 枣庄市文化西路23号
E-mail:zzint@zzint.com
  • 技术咨询:
  • 业务咨询:
  • 客户服务:
  • 服务监督:
详细资料 您当前的位置:网站首页新闻动态详细资料

Javascript改变图像源不工作

我正在做一个简单的网站,改变点击按钮时显示的图像。但我的代码似乎没有工作,当我点击按钮“点击!alt文本被显示,而不是图像更改。图像的来源是完全正常的,当我使用相同的源脚本以外的图像显示。

<head>
    <title>Pic Change</title>
    <meta charset="utf-8">
    <meta name="Pic Change">
    <meta name="keywords" content="face,PES">
    <meta name="author" content="Thalle">

    <meta name="viewport" content="width=device-width,initial-scale=1.0"></head><body class="body" style="background-color:#4682B4">
    <script>
    function display(whichimage){
        if(whichimage == 0){    
            document.getElementById('Click').src="C:\Users\Rajesh Talesara\Desktop\My Disc\Memes\Animals\initial.jpeg"
        }
        else{
            document.getElementById('Click').src="C:\Users\Rajesh Talesara\Desktop\My Disc\Memes\Animals\Whenlife.jpeg"
        }

    }
    </script>

    <image id="Click" src="C:\Users\Rajesh Talesara\Desktop\My Disc\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >

    <p>
    <button type="button" onclick="display(1)">Click!</button>
    <button type="button" onclick="display(0)">Reset</button>
    </p></body></html>


向下票

您不应从磁盘加载图像。我们和其他人看不到。如果您使用相对路径,并确保每个图像和HTML文件都在同一目录中,那应该没问题。即使你做,你必须指定file://协议。但是如果你使用外部图像从网站,我们可以看到他们。

没有<image>在HTML元素。这只是<img>

你应该输入\\代替\,因为\字符有特殊的意义。然而,JavaScript是聪明的,你可以使用/也不必遵循Windows的方法。

请不要使用该onclick属性。它真的老了。而应使用事件侦听器。

现在我不知道你的代码中的问题是什么,但是,有一个工作示例:

<!DOCTYPE html><html>
    <title>Pic Change</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector("button").addEventListener("click", function() {
                document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
            });
        });
    </script>
    <p><img src="file://C:/Data/300x300.png" /></p>
    <p><button type="button">Click!</button></p></html>

如果这两个图像和index.htmlC:\Data目录中,它工作正常。




上篇文章:在图像html5中定义对象
下篇文章:Snapchat
版权所有 枣庄市英特信息网络有限公司 ◎2017
联系电话:0632-5271123 5272123  总部地址:枣庄市市中区文化西路23号
鲁ICP备09021689号 增值电信业务经营许可证编号:鲁 B2-20080087号