Question

我有一个简单的网页，上面有一个简单的拼图。用户应该将一些图像拖到指定的拖放区域。我在DreamWeaver生成的JavaScript中使用解决方案。

我想添加一个JavaScript函数，该函数会在用户刚刚删除的图像旁边显示 correct.png 或 wrong.png 图像。直接的方法是为每个可拖动的图像提供正确的和错误的 div元素。但是有更优雅的方式吗？

另一种说法是：
编写一个像Show(commonImageId, nextToImageId)一样使用的JavaScript函数Hide(commonImageId, nextToImageId)和Show('correct', 'draggable1');。

Answer 1

您可以尝试使用此解决方案，而不是显示和隐藏多个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在网页中的不同位置多次显示相同的图像

1 个答案: