JavaScriptを使用してWebページの異なる場所に同じ画像を複数回表示する

シンプルなパズルを持つシンプルなWebページがあります。ユーザーが指定したドロップゾーンにドラッグするはずのイメージがいくつかあります。私はDreamWeaverによって生成されたJavaScriptのソリューションを使用します。JavaScriptを使用してWebページの異なる場所に同じ画像を複数回表示する

私は、ユーザーがちょうど落とした画像の横correct.pngまたはwrong.png画像を表示するJavaScript関数を追加します。それを行うための簡単な方法は、がそれぞれとの間違ったdivの要素をドラッグ可能な画像ごとに正しく設定することです。しかし、よりエレガントな方法がありますか？それを置くために

もう一つの方法は、次のようになります。
Show('correct', 'draggable1');のように使用されるJavaScript関数Show(commonImageId, nextToImageId)とHide(commonImageId, nextToImageId)を書きます。

出典

2009-06-09 SinkovecJ

複数のdivを表示して非表示にする代わりに、この解決策を試すこともできます。

2つのスタイルを作成し、それぞれに異なる背景イメージを設定します。特定のイメージに正しいか間違っているとマークする必要がある場合は、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>

出典

2009-06-09 11:15:24 tschaible

JavaScriptを使用してWebページの異なる場所に同じ画像を複数回表示する

答えて

関連する問題