#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    Display image Based On Form Selection


    Hello I'm not a big poster, but I'm so confused on how to approach this I felt it necessary. I'm trying to set up a form that while it is completed an image changes to match the attributes selected. To make it easier to understand I've created an image version of what I'm trying to do.

    Code:
    http://www.amazinsounds.com/form-image-if.png

    This is one form though ti appears as 3 in the image. This was done to explain what I mean.

    For example when the selections are blue,right and bottom right the circle would appear within a blue box in the bottom right box. This of course is just an example of what I'm trying to do, but I believe if i can work through this sample I can complete what I'm trying to accomplish.

    I would be creating an image for each possibility then once it matches the selections I would call that image representation.

    I'm want to do this upon selection rather than upon submission of any form.

    If this doesn't' make sense please let me know and I will try to clarify.

    Thanks so much for your help.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Here would be one way to do this:
    Code:
    <style>
    img {
    width:100px;
    height:100px;
    border:solid 1px black;
    }
    label {
    display:block;
    font-weight:bold;
    font-size:110%;
    margin-top:10px;
    }
    #stage_2, #stage_3 {
    display:none;
    }
    </style>
    
    <script>
    function changeIMG_Sel(imgID,color,cPos,qPos,stage1,stage2,this_form)
    {
     // validate color
    if(color != "") {
     switch(color){
      case "green":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_green.jpg";
      break;
      case "blue":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_blue.jpg";
      break;
      case "red":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_red.jpg";
      break;
     }
      var inputs = document.getElementById(this_form).getElementsByTagName("input");
      for(i=0;i<3;i++){
       inputs[i].disabled = true; // lock down these input fields in form - prevents changes to image "src" attribute
      }
    document.getElementById(stage1).style.display = "block";
    }
    if(cPos != "") {
     // validate circle position
     switch(cPos){
      case "top":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_top.jpg";
      break;
      case "bottom":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_bottom.jpg";
      break;
      case "left":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_left.jpg";
      break;
      case "right":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_right.jpg";
      break;
     }
      var inputs = document.getElementById(this_form).getElementsByTagName("input");
      for(i=3;i<7;i++){
       inputs[i].disabled = true; // lock down these input fields in form - prevents changes to image "src" attribute
      }
    document.getElementById(stage2).style.display = "block";
    }
    if(qPos != "") {
     // validate quadrant position
     switch(qPos){
      case "top_left":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_top_left.jpg";
      break;
      case "top_right":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_top_right.jpg";
      break;
      case "bottom_left":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_bottom_left.jpg";
      break;
      case "bottom_right":
      document.getElementById(imgID).src = document.getElementById(imgID).src.replace(".jpg","") + "_bottom_right.jpg";
      break;
     }
      var inputs = document.getElementById(this_form).getElementsByTagName("input");
      for(i=7;i<11;i++){
       inputs[i].disabled = true; // lock down these input fields in form - prevents changes to image "src" attribute
      }
    }
    }
    </script>
    
    <img id="box1" src="starter_img.jpg"/>
    
    <form id="form1">
    
    <label>Color</label>
    <input type="radio" name="color" value="green" onclick="changeIMG_Sel('box1','green','','','stage_2','stage_3','form1')"/> Green<br/>
    <input type="radio" name="color" value="blue" onclick="changeIMG_Sel('box1','blue','','','stage_2','stage_3','form1')"/> Blue<br/>
    <input type="radio" name="color" value="red" onclick="changeIMG_Sel('box1','red','','','stage_2','stage_3','form1')"/> Red<br/>
    
    <div id="stage_2">
    <label>Circle Position</label>
    <input type="radio" name="cPos" value="top" onclick="changeIMG_Sel('box1','','top','','stage_2','stage_3','form1')"/> Top<br/>
    <input type="radio" name="cPos" value="bottom" onclick="changeIMG_Sel('box1','','bottom','','stage_2','stage_3','form1')"/> Bottom<br/>
    <input type="radio" name="cPos" value="left" onclick="changeIMG_Sel('box1','','left','','stage_2','stage_3','form1')"/> Left<br/>
    <input type="radio" name="cPos" value="right" onclick="changeIMG_Sel('box1','','right','','stage_2','stage_3','form1')"/> Right<br/>
    </div>
    
    <div id="stage_3">
    <label>Circle Position</label>
    <input type="radio" name="qPos" value="top_left" onclick="changeIMG_Sel('box1','','','top_left','','','form1')"/> Top Left<br/>
    <input type="radio" name="qPos" value="top_right" onclick="changeIMG_Sel('box1','','','top_right','','','form1')"/> Top Right<br/>
    <input type="radio" name="qPos" value="bottom_left" onclick="changeIMG_Sel('box1','','','bottom_left','','','form1')"/> Bottom Left<br/>
    <input type="radio" name="qPos" value="bottom_right" onclick="changeIMG_Sel('box1','','','bottom_right','','','form1')"/> Bottom Right<br/>
    </div>
    
    </form>
    Although..., I think doing what your wanting to do; using a <canvas> tag and changing it's color and drawing shapes/lines on it or even dynamically creating a image (server side) and changing it's color and drawing shapes/lines on it..., would be a much be better approach; then the way your going about doing this, but... that's just my opinion.

IMN logo majestic logo threadwatch logo seochat tools logo