2 Radio button to = 1 image

Question

KoolAide2010 0 Newbie Poster

13 Years Ago

I am new to javascript and I am not sure if my idea will even work in java script but here we go.

My Dad has a web page and I am trying to help him out with it. He builds duck calls and I am trying to make a build your own call section for him. I am wanting every color combination possible for this page to be set up and I would like to do it with radio buttons and the color name next to it. His calls come in 2 parts. The first is the barrel and the second part is the insert. I am wanting people to be able to be able to click 2 separate colors to show a different image for each selection they choose. So I.E. Black + Orange = BlackOrange.jpg and it will show a picture of a black barrel and orange insert of the call.

The lay out is pretty simple. I am wanting the picture on top and 2 columns to be listed with radio buttons going down each column and by each radio button i am wanting the colors.
For example.

------------[Image]
Barrels -------------- Inserts
=================================
o Black --------------- o Black
o White --------------- o White
o Orange--------------- o Orange

The page didn't show up like I wanted it took out the spacing so I inserted -'s to show off the actual look
And so on and so forth.
I can read java script and edit it decently. I am not a complete newbie when it comes to coding but I can't figure out how to write it to get the output I want.
I have found several different pages that offer 1 radio button for each picture but I am wanting to see if I can get it setup the same way as I have it laid out if it is even possible.
Any help would be appreciated and if you can't help if somebody could find me a link to something that could point me in the right direction that would be appreciated as well.

I know I can go the easy route and just do 1 image for 1 radio button and have it setup like:

[Image]
Barrels/Inserts
================
oBlack/Black
oBlack/White

But that just doesn't look as professional and to be honest I have been trying to get the way I want it done for a while now and have had no success. It is more of a personal challenge for me to find out how to get it done the way I want.

I am thinking it should be something like: if column A1 + column B3 = true go to imageA1B3.jpg(which would be a black barrel with a orange insert) or something along that lines but I can't get it to work any way I try.

Anyways sorry for the long post and like I said any help would be appreciated. Thanks!

javascript

2 Contributors
4 Replies
146 Views
23 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by KoolAide2010

Taywin 312 Posting Virtuoso

13 Years Ago

Your idea is quite good, but there are so many ways to deal with this. Below is one way that I created in attempt to match what you want.

1.This page uses CSS background image to deal with image changing.
2.The page expects all images are in the same folder where the HTML file is. You can change the image location in CSS.
3.I do not know whether or not you allow to show when only one color is selected. As a result, there are 'blank' color included in the CSS list.

<html>
<head>

<style type="text/css">
.blankblank {  /* no color is selected */
  background-image: url("blankblank.jpg");
}
.blackblank {  /* barrel is black but insert color is not selected */
  background-image: url("blackblank.jpg");
}
.blankblack{  /* barrel color is not selected but insert is black */
  background-image: url("blankblack.jpg");
}
.blackblack {  /* both barrel and insert are black */
  background-image: url("blackblack.jpg");
}
.blackwhite {  /* barrel is black and insert is white */
  background-image: url("blackwhite.jpg");
}
.blackorange {  /* barrel is black and insert is orange */
  background-image: url("blackorange.jpg");
}

/* and other images */

.imgFixedSize {
  width: 400px;
  height: 300px;
}
</style>

<script type="text/javascript">
function changeImg(barrelName, insertName, imgID) {
  var barr = document.getElementsByName(barrelName)
  var inst = document.getElementsByName(insertName)
  var img = document.getElementById(imgID)
  if (barr && inst && img) {  // if all exist
    var selectedColor = ""
    var imgClassName = ""
    // get the barrel color
    for (var i=barr.length-1; i>=0; i--) {
      if (barr[i].checked==true) {
        selectedColor += barr[i].value
        break
      }
    }
    if (selectedColor.length==0) { imgClassName += "blank" }
    else { imgClassName += selectedColor }
    // get the insert color
    selectedColor = ""  // reset
    for (var i=inst.length-1; i>=0; i--) {
      if (inst[i].checked==true) {
        selectedColor += inst[i].value
        break
      }
    }
    if (selectedColor.length==0) { imgClassName += "blank" }
    else { imgClassName += selectedColor }
    img.className = imgClassName+" imgFixedSize"  // set the image
  }
}
</script>

</head>

<body>
<div>
<input name="barrel" type="radio" value="black" onchange="changeImg('barrel', 'insert', 'imgDiv')">Black
&nbsp;&nbsp;
<input name="insert" type="radio" value="black" onchange="changeImg('barrel', 'insert', 'imgDiv')">Black
<br />
<input name="barrel" type="radio" value="white" onchange="changeImg('barrel', 'insert', 'imgDiv')">White
&nbsp;&nbsp;
<input name="insert" type="radio" value="white" onchange="changeImg('barrel', 'insert', 'imgDiv')">White
<br />
<input name="barrel" type="radio" value="orange" onchange="changeImg('barrel', 'insert', 'imgDiv')">Orange
&nbsp;&nbsp;
<input name="insert" type="radio" value="orange" onchange="changeImg('barrel', 'insert', 'imgDiv')">Orange
</div>

<div id="imgDiv" class="blankblank imgFixedSize">
</div>

</body>
</html>

Edited 13 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

KoolAide2010 0 Newbie Poster · Answer 1 · 2010-12-27T06:42:31+00:00

Here is what I have so far and it looks like it should work but it's not switching between pictures like it should. All it does is sit there and load MyDefaultImage.jpg and shows radio buttons. It's not poping up any errors but at the same time it's not switching between pictures either. PLEASE HELP! Thanks.

<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg"><br><br>  
Barrels:   --------    Inserts:<br>  
Black <input type = "radio" name = "rad1" value = "1" onclick = "showImage()"> Black <input type = "radio" name = "rad2" value = "10" onclick = "showImage()"><br>  
White <input type = "radio" name = "rad1" value = "2" onclick = "showImage()"> White <input type = "radio" name = "rad2" value = "20" onclick = "showImage()"><br>  
Orange <input type = "radio" name = "rad1" value = "3" onclick = "showImage()"> Orange <input type = "radio" name = "rad2" value = "30" onclick = "showImage()"><br>
Red <input type = "radio" name = "rad1" value = "4" onclick = "showImage()"> Red <input type = "radio" name = "rad2" value = "50" onclick = "showImage()"><br>  
<br>  
</form>  
<br>  
<script type = "text/javascript">  
function showImage() {  
var A =0;  
var B = 0;  
for (var i=0; i <document.myform.rad1.length; i++) {  
if (document.myform.rad1[i].checked) {  
A = document.myform.rad1[i].value;  
}  
}  
for (var i=0; i <document.myform.rad2.length; i++) {  
if (document.myform.rad2[i].checked) {  
B = document.myform.rad2[i].value;  
}  
}  
var x = A*B;  
if (x>0) {  
var suffix = x + ".jpg" 
document.getElementById("myImage").src = A + "_" + B + suffix;  
}  
}  
</script>  
</body>  
</html>

Also with: document.getElementById("myImage").src = A + "_" + B + suffix;
I am adding a _ between my color names and I think that will help me to keep track of image names better.

KoolAide2010 0 Newbie Poster · Answer 2 · 2010-12-27T07:21:32+00:00

I like the idea you have for your code but it looks like it is going to be WAY! to complex for what I really need. I am going to have like 180 different pictures that is going to be displayed. And the thing is. You have blackblank.jpg and blankblack.jpg which tells me that you have the idea that a picture should show up for anybody clicking just 1 radio button. The thing is. I don't want any picture to show up until both radio buttons are selected. So I mean I guess I could put blankblank.jpg for those as well.

I think the way I have my code setup it will work great that way because it just goes by radio button selection on what radio buttons are on the page and they pull the black_orange.jpg if black and orange are selected. But I am having problems getting the code to switch through the colors like they should. I need help big time cause I am not getting any errors on this and I am not the best of java scriptors! ;)

KoolAide2010 0 Newbie Poster · Answer 3 · 2010-12-27T07:25:07+00:00

I am sorry about the code I posted earlier too because i forgot to change the value = "1" which should be value = "black" and white and all the colors but I wasn't paying attention and copied older code.
so the new code is.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<form name = "myform"><img id = "myImage" src = "MyDefaultImage.jpg"><br><br>  Barrels:   --------    Inserts:<br>  Black <input type = "radio" name = "rad1" value = "1" onclick = "showImage()"> Black <input type = "radio" name = "rad2" value = "10" onclick = "showImage()"><br>  White <input type = "radio" name = "rad1" value = "2" onclick = "showImage()"> White <input type = "radio" name = "rad2" value = "20" onclick = "showImage()"><br>  Orange <input type = "radio" name = "rad1" value = "3" onclick = "showImage()"> Orange <input type = "radio" name = "rad2" value = "30" onclick = "showImage()"><br>Red <input type = "radio" name = "rad1" value = "4" onclick = "showImage()"> Red <input type = "radio" name = "rad2" value = "50" onclick = "showImage()"><br>  <br>  </form>  <br>  <script type = "text/javascript">  function showImage() {  var A =0;  var B = 0;  for (var i=0; i <document.myform.rad1.length; i++) {  if (document.myform.rad1[i].checked) {  A = document.myform.rad1[i].value;  }  }  for (var i=0; i <document.myform.rad2.length; i++) {  if (document.myform.rad2[i].checked) {  B = document.myform.rad2[i].value;  }  }  var x = A*B;  if (x>0) {  var suffix = x + ".jpg" document.getElementById("myImage").src = A + "_" + B + suffix;  }  }  </script>  </body>  </html><form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg"><br><br>  
Barrels:   --------    Inserts:<br>  
Black <input type = "radio" name = "rad1" value = "black" onclick = "showImage()"> Black <input type = "radio" name = "rad2" value = "black" onclick = "showImage()"><br>  
White <input type = "radio" name = "rad1" value = "white" onclick = "showImage()"> White <input type = "radio" name = "rad2" value = "white" onclick = "showImage()"><br>  
Orange <input type = "radio" name = "rad1" value = "orange" onclick = "showImage()"> Orange <input type = "radio" name = "rad2" value = "orange" onclick = "showImage()"><br>
Red <input type = "radio" name = "rad1" value = "red" onclick = "showImage()"> Red <input type = "radio" name = "rad2" value = "red" onclick = "showImage()"><br>  
<br>  
</form>  
<br>  
<script type = "text/javascript">  
function showImage() {  
var A =0;  
var B = 0;  
for (var i=0; i <document.myform.rad1.length; i++) {  
if (document.myform.rad1[i].checked) {  
A = document.myform.rad1[i].value;  
}  
}  
for (var i=0; i <document.myform.rad2.length; i++) {  
if (document.myform.rad2[i].checked) {  
B = document.myform.rad2[i].value;  
}  
}  
var x = A*B;  
if (x>0) {  
var suffix = x + ".jpg" 
document.getElementById("myImage").src = A + "_" + B + suffix;  
}  
}  
</script>  
</body>  
</html>

Also with: document.getElementById("myImage").src = A + "_" + B + suffix;
I am adding a _ between my color names and I think that will help me to keep track of image names better.