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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing pictures using checkboxes

    I'm making a couple of web pages for my physics class for our light and colors unit. I'm trying to code my webpage so that when the user checks off any combination of three check boxes (labled red, green, and blue) and hits the refresh button (which I'm planning on using to refresh the image, not sur eif that is needed or not though) a pre-made image diplaying to picture using only those colors appears where the original one was, so there are 7 total images. I have been toying with this and have gotten no where, can someone tell me what I need to do to get this working?

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Colors Page, Part I</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script language="javascript">
    <!--
    	function changeImage(form2)
    	{
    		if(check.checkbox[1].checked)
    			{
    				image.
    		else
    			alert("Incorrect");
    	}
    //-->
    </script>
    </head>
    
    <body>
    
       
             <!-- Begin Header -->
             <div id="header">
    		 
    		       <p>This is the Header</p>		 
    			   
    		 </div>
    		 <!-- End Header -->
    		 
    		 <!-- Begin Left Column -->
    		 <div id="leftcolumn">
             <table>
             <tr><td>Please choose one of the following parts of this webpage to interact with.<br><br></td></tr>
             <tr><td><h1><a href="part_i.html">Part I</a></h1><br><br></td></tr>
             <tr><td><h1><a href="part_ii.html">Part II</a></h1><br><br></td></tr>
             <tr><td><h1><a href="part_iii.html">Part III</a></h1><br><br></td></tr>
             
    		    
    		 </table>
    		 </div>
    		 <!-- End Left Column -->
    		 
    		 <!-- Begin Content Column -->
    		 <div id="content">
             <form name="image">
    		 <script language="javascript">
    		 <!--
    		    
    		 //-->
             </form>
    
                      
    	      		 
    		 
    		 </div>
    		 <!-- End Content Column -->
             
             <!-- Begin Data Column -->
             <div id="data">
             <table>
             <form name="check">
             <tr><td>Check or uncheck the boxes below to alter the image on the left, click "Refresh" to refresh the image.</td></tr>
             <tr><td>Red</td>
             <td align="center"><input type="checkbox" value="checkbox"></td></tr>
             <tr><td>Green</td>
             <td align="center"><input type="checkbox" value="checkbox"></td></tr>
             <tr><td>Blue</td>
             <td align="center"><input type="checkbox" value="checkbox"></td></tr>
             </form>
             <form>
             <tr><td><button name="refresh" value="Refresh">Refresh</button></td></tr>
             </form>
             </table>
    
    		 </div>
    		 <!-- End Data Column -->
    
       
    </body>
    </html>
    and the CSS:

    Code:
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
    }
    
    #header {
     color: #333;
     width: 85%;
     float: left;
     padding: 10px;
     border: 1px solid #ccc;
     height: 20%;
     margin: 1% 5% 0 7.5%;
     background: #7777AA;
     border: 4px ridge #9999ff;
     
    }
    #header p {
     text-align: center;
     verticle-align: center;
     font-size: 20pt;
     font-stretch: ultra-expanded;
    }
    #leftcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #8888FF;
     margin: 0px 0 0px 7.5%;
     padding: 10px;
     height: 76%;
     width: 20%;
     float: left;
     border: 4px ridge #9999ff;
    }
    #content { 
     float: left;
     color: #333;
     border: 1px solid #ccc;
     background: #BBBBFF;
     margin: 0px 0px 0px 0px;
     padding: 1%;
     height: 76%;
     width: 35%;
     display: inline;
     border: 4px ridge #9999ff;
    }
    #content img {
     margin: 5% 2% 2% 2%;
     height: 90%;
     width: 100%;
    }
    #data {
     color: #333;
     background: #bbbbff;
     border: 1px solid #ccc;
     margin: 0 0 0 0;
     width: 79.8%;
     height: 76%;
     padding: 1%;
     border: 4px ridge #9999ff;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,206
    Thanks
    23
    Thanked 605 Times in 604 Posts
    What you give here has nothing to do with your question. Are you talking about an image in three colors that you want to show with three other colors? Are you talking about showing the result of the three colors in combination?

    Need more input here.


  •  

    Posting Permissions

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