gpt4 book ai didi

javascript - 使用 JavaScript 在网页的不同位置多次显示同一图像

转载 作者:行者123 更新时间:2023-12-02 20:46:53 26 4
gpt4 key购买 nike

我有一个简单的网页,其中有一个简单的谜题。用户应该将一些图像拖到指定的放置区域。我使用 DreamWeaver 生成的 JavaScript 解决方案。

我想添加一个 JavaScript 函数,该函数将在用户刚刚放置的图像旁边显示 正确的.png错误的.png 图像。最简单的方法是为每个可拖动图像设置正确错误 div 元素。但有没有更优雅的方式呢?

另一种表达方式是:
编写将使用的 JavaScript 函数 Show(commonImageId, nextToImageId)Hide(commonImageId, nextToImageId)就像 Show('正确', 'draggable1');

最佳答案

您也可以尝试此解决方案,而不是显示和隐藏多个 div。

创建两种样式,每种样式具有不同的背景图像集。每当你捕获给定图像应该被标记为正确或错误的事件时,只需交换 div 的样式,这将产生切换背景图像的效果。

下面的示例代码非常快(并且需要一些清理),您已经有了使用函数设置类型的正确想法...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
width:80px;
height:80px;
float:left;
}
.correct{
background-image:url('correct.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.wrong{
background-image:url('wrong.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.item{
float:left;
height:80px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>

关于javascript - 使用 JavaScript 在网页的不同位置多次显示同一图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/969342/

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