1

The following code was a reply to a question posted last year. It’s the best example I can find to want I am looking to do. I have HTML knowledge but my JS is limited – thanks for your patience. You can view the code here. The thread can be found here.

<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"/>

How can I get multiple images to display when a checkbox has been clicked? The images would be the same, position different. When the images are displayed I would like to have a onclick event or mouseover that would display additional info– what is the best option for this, JS or image map (hotspots)?both? I’ve used hotspots before but only by itself not with JS. Any advice on this would be appreciated. The following link is an example of what I am trying to achieve but on a smaller scale. http://www.cozumel.travel/learn/map.cfm

Community
  • 1
  • 1
user1781287
  • 21
  • 2

1 Answers1

0

If you want to use the same code but for multiple images, you can add a function that would toggle every image you defined for the onChange event.

here is a function that would do:

  function toggleMultiVisibility (a){

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

}

and here is the change you should do on the HTML:

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

here is a working example from your code: http://jsfiddle.net/Pu2E7/

mrtksn
  • 412
  • 3
  • 18
  • I have been trying to play with this code but have not been unable to figure out how to add more than one image per check box. – user1781287 Nov 04 '12 at 15:44