1

次のコードは、昨年投稿された質問への回答です。これは、私がやりたいことを見つけることができる最良の例です。HTML の知識はありますが、JS には限界があります。ご理解のほどよろしくお願いいたします。コードはこちらでご覧いただけます。スレッドはここにあります。

<script>
  function toggleVisibility(id) {
    var el = document.getElementById(id);

    if (el.style.visibility=="visible") {
          el.style.visibility="hidden";
     }
     else {
          el.style.visibility="visible";
     }
 }
</script>

<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');"     /><br/>


<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation"    onChange="toggleVisibility('imgpopulation');" />
<hr />

<img id="imgemployment"    src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG"  style="visibility:hidden"/>

チェックボックスがクリックされたときに複数の画像を表示するにはどうすればよいですか? 画像は同じで、位置が異なります。画像が表示されたら、追加情報を表示する onclick イベントまたはマウスオーバーが必要です。JS または画像マップ (ホットスポット) のどちらに最適なオプションですか? 以前にホットスポットを使用したことがありますが、JS ではなく単独で使用しました。これに関するアドバイスをいただければ幸いです。次のリンクは、私が達成しようとしているものの例ですが、小規模です。http://www.cozumel.travel/learn/map.cfm

4

1 に答える 1

0

同じコードを複数の画像に使用したい場合は、 onChange イベントに定義したすべての画像を切り替える関数を追加できます。

これが行う機能です：

  function toggleMultiVisibility (a){

for (var i = 0; i < a.length; i++){
 toggleVisibility(a[i]);
}

}

HTMLで行う必要がある変更は次のとおりです。

onChange="toggleMultiVisibility(['imgemployment','imgpopulation']);"

これがあなたのコードの実例です: http://jsfiddle.net/Pu2E7/

于 2012-10-28T22:13:28.947 に答える