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 事件或 mouseover 来显示附加信息——对此，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 回答