If tirna is here...

This site is best viewed in a modern browser with JavaScript enabled.

dad7more

Hi again, (if someone other then tirna would like to answer this, you can read my post called 'basic question' a few lines down for clarification)

I ran into another interesting situation.

I am basically still doing the same thing I was last night except this time using check boxes instead of radio buttons. Here is the code I have.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body {background-color:#f7f3e9;}
.container {margin: 30px auto; width: 800px; height: 500px;}
.col1 {position: relative; width: 270px;height:500px;float:left;}
.col2 {width: 500px;float:right; padding: 100px 0 50px; 0px;}
.box {position: absolute; top: 200px; left:0; width:180px; height: 120px; border: 4px double #adadad;padding:30px;}
</style>

<script type="text/javascript">

var a=1;
var b=1;

function newpic()  {
    var radBtns = new Array();
    //get all the radio buttons
    radBtns = document.getElementById("box").getElementsByTagName("input");
    //assign the values to a and b
    for(var i=0; i < radBtns.length; i=i+1) {
        if(radBtns[i].checked && radBtns[i].name == "sub1") a = 2; else a=1;
		if(radBtns[i].checked && radBtns[i].name == "sub2") b = 2; else b=1;
    }
 document.getElementById("b1").src =a+"/"+b+"/1.png";
}

</script>

</head>
<body>
<div class="container">
 <div class="col1">
  <div id="box" class="box">

<input type="checkbox" name="sub1" id="dtab1" value="1" onclick="newpic()"> Fire
<input type="checkbox" name="sub2" id="dtab2" value="2" onclick="newpic()"> Garage

  </div>
 </div>
 <div class="col2">
  <a href=""><img border="0" alt="pics" src="1/1/1.png" id="b1" /></a>
 </div>
</div>
</body>
</html>

The interesting thing is that the code works like this:

the way it is now. only the second check box works.
if I remove the "else" from the "if" statement for the first check box, the first check box also works when i click it, but obviously does not return to normal when unclicked.
if I reverse the "a" and "b" variables between the lines, it is always the second checkbox only that works.
if I reverse the checkboxes or their names (sub1/2) it is always the second checkbox only that works.

tirna

It's not clear to me how you want the 2 checkboxes to function.

In your other thread you had 4 radio buttons with 4 combinations possible from the 2 sets of radio buttons.

Do you want to just simply toggle 2 images between the 2 checkboxes. Do you want the check boxesto behave like radio buttons..ie..only 1 checkbox can be checked at a time. Or do you want to allow both checkboxes to be checked at the same time? What do you want to happen if both checkboxes are checked?

dad7more

I want the checkboxes to provide 4 different options:

( ) (v) ( ) (v)
( ) ( ) (v) (v)

thus doing the same thing as the 4 radio buttons except using only 2 checkboxes.

so above the first set would call 1/1/1.png, the second 1/2/1.png, third 2/1/1.png, and fourth 2/2/1.png

dad7more

srry, the formatting got erased. so above each set would be 2 vertical boxes i.e.

( )
( )

tirna

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body {background-color:#f7f3e9;}
.container {margin: 30px auto; width: 800px; height: 500px;}
.col1 {position: relative; width: 270px;height:500px;float:left;}
.col2 {width: 500px;float:right; padding: 100px 0 50px; 0px;}
.box {position: absolute; top: 200px; left:0; width:180px; height: 120px; border: 4px double #adadad;padding:30px;}
</style>
<script type="text/javascript">

var a,b;

function newpic()  {
     a = (document.getElementById("dtab1").checked)? 2 : 1 ;   

     b = (document.getElementById("dtab2").checked)? 2 : 1 ;

 alert(b+"/"+a+"/1.png");
 document.getElementById("b1").src =b+"/"+a+"/1.png";
}

</script>
</head>
<body>
<div class="container">
 <div class="col1">
  <div id="box" class="box">
 <input type="checkbox" name="sub1" id="dtab1" value="1" onclick="newpic()" > Fire
 <input type="checkbox" name="sub2" id="dtab2" value="2" onclick="newpic()" > Garage
  </div>
 </div>
 <div class="col2">
  <a href=""><img border="0" alt="pics" src="1/1/1.png" id="b1" /></a>
 </div>
</div>
</body>
</html>

dad7more

thanks again. it works.

unfortunately it's not something i would have ever come up with based on the stuff you gave me before.

i am guessing that what you did was a simplified version using the id tag directly and that the ? 2:1 is some sort of shorthand notation for the if else which I wouldn't know about.

but not sure if the way i was doing it would have worked as well with some correction or if it was completely wrong for whatever reason.

i realize now i am asking for a tutorial as well and don't want to take up any more of your time. what's important is that it works. I believe I now have all the components of what I need to do and will be able to put them together to get the final result which will be a combination of radio buttons and check boxes that will be cycling through all the 16 pics.

thanks again

tirna

no problem

Since you had only 2 checkboxes, I thought it was easier to just check whether each was checked or not and assign the appropriate values for a and b using a 'shorhand' version of if-else.

I then also had to reverse the order of a and b in your image path to get the order of paths to match your required order.

You could have also done it the way you had as well but you had logic errors in your code. Your code logic was based on your previous scenario where you had 4 radio buttons and so was not correct for this case with 2 checkboxes.

One way of doing it your way is:

function newpic()  {
    var radBtns = new Array();
    //get all the radio buttons
    radBtns = document.getElementById("box").getElementsByTagName("input");
    //assign the values to a and b
    for(var i=0; i < radBtns.length; i=i+1) {
        if(radBtns[0].checked) a = 2; else a = 1;
        if(radBtns[1].checked) b = 2; else b = 1;
    }
    alert(b+"/"+a+"/1.png");
 document.getElementById("b1").src =b+"/"+a+"/1.png";
}