Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    checkbox to call images

    My knowledge of JavaScript is very limited but hopefully not for long. HTML and CSS I do have some know how.
    I have created a form; specifically a checkbox and when the checkbox is ticked I have an image that is displayed. My question is this – Is it possible to have more than one image display when one checkbox has been clicked? I would like to have 10-20 images display when one checkbox has been ticked. Any direction on this would be much appreciated.
    TIA

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    are they always the same images? if so, just put them all into a hidden div and show/hide it depending on what happens with the checkbox

    Code:
    <html>
    <head>
    <style>
    #picsdiv{
    display:none;
    }
    </style>
    </head>
    <body>
    <input type="checkbox" id="mycb" onclick="showHide(this)"/>
    <div id="picsdiv">put your images here</div>
    <script type="text/javascript">
    function showHide(box){
    document.getElementById("picsdiv").style.display=box.checked?"block":"none";
    }
    </script>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    are they always the same images? if so, just put them all into a hidden div and show/hide it depending on what happens with the checkbox

    Code:
    <html>
    <head>
    <style>
    #picsdiv{
    display:none;
    }
    </style>
    </head>
    <body>
    <input type="checkbox" id="mycb" onclick="showHide(this)"/>
    <div id="picsdiv">put your images here</div>
    <script type="text/javascript">
    function showHide(box){
    document.getElementById("picsdiv").style.display=box.checked?"block":"none";
    }
    </script>
    </body>
    </html>
    Yes they would all be the same image but eventually I would like to add a rollover or onclick event to each image. Would this still work?

    ex: I would like one checkbox that when ticked would display 10 images which would all be the same image but when a user rollsover or clicks each image a text box would display with addtional info, which would be different for each image.

    Hope I am explaining this clearly


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •