gpt4 book ai didi

JavaScript - 图像路径

转载 作者:行者123 更新时间:2023-12-02 18:49:50 24 4
gpt4 key购买 nike

我有以下 JavaScript/HTML 代码:

<head runat="server">
<title>Home Page</title>
<script src="Resources/jQuery.js" type="text/javascript"></script>

<script type="text/javascript">
function change_image()
{
var url = document.getElementById('Change_Image').src;

if (url == 'http://placehold.it/200x200')
{
document.getElementById('Change_Image').src = 'http://placehold.it/100x100';
}

else
{
document.getElementById('Change_Image').src = 'http://placehold.it/200x200';
}
}

setInterval(change_image, 1000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Welcome to my Website</h1>
<h2>Below you can find an example of visual cryptography</h2>
<br />
<br />
<div><img id="Change_Image" src="http://placehold.it/200x200" alt="Letter A"/></div>
</div>
</form>
</body>
</html>

代码每两秒在两个图像之间切换。图像在线存储。

现在,在我的项目中,我有一个名为 Resources 的文件夹,其中包含两个名为 Share1.bmp 和 Share2.bmp 的图像。

如果我修改上面的代码以使用这两个图像,则不再起作用。我就是这样做的:

if (url == '../Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = '../Resources/Share2.bmp';
}

else
{
document.getElementById('Change_Image').src = '../Resources/Share1.bmp';
}

...
...
<div><img id="Change_Image" src="../Resources/Share1.bmp" alt="Letter A"/></div>

我做错了什么?我是否错误地将 url 传递给了项目中存储的图像?

编辑

使用我的图像时,Share1.bmp 可以正确显示,但不会发生切换。问题似乎出在 JavaScript 中的 URL。

最佳答案

使用 jQuery,您可以将两个图像放在那里并让它们隐藏显示(切换)。

http://api.jquery.com/toggle/

你的html:

<div class="someContainer">
<img class="Change_Image" src="Resources/Share1.bmp" alt="Letter A" />
<img class="Change_Image" src="Resources/Share2.bmp" alt="Letter B"
style="display:none"/>
</div>

你的JavaScript:

$(document).ready(function(){
var toggleImages=function(){
$(".someContainer").find(".Change_Image").toggle();
setTimeout(toggleImages,2000);
}
toggleImages();
});

要编写自己的切换实现(仅适用于此特定实例),您可以直接在包含图像的 div 之后添加此 JS:

<div class="someContainer" id="myImageContainer">
<img src="Resources/Share1.bmp" alt="Letter A" />
<img src="Resources/Share2.bmp" alt="Letter B"
style="display:none"/>
</div>
<script type="text/javascript">
(function(){
var images= document.getElementById("someContainer")
.getElementsByTagName("img")
,toggleImages=function(){
for(var i = 0;i < images.length;i++){
images[i].style.display=(image.style.display==="none")?
"":"none";
}
setTimeout(toggleImages,2000);
};
toggleImages();
})();
</script>

关于JavaScript - 图像路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15950031/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com