HELP! Java Swaping images

Discussion in 'HTML & Website Design' started by Maqui, Nov 21, 2007.

  1. #1
    Well take a look at my code, it looks like someone else was trying to do the same exercise but I think I have more info to go on take a look:


    
    <HTML>
    
    <HEAD>
    
    <TITLE>Assignment 11</TITLE>
    
    <SCRIPT>
    
    function swap ()
    {
     
                    
      if (document.arranger.a[0].selected)
      {                                       
        document.upperleft.src = document.arranger.a[0].value;
      }   
      else if (document.arranger.a[1].selected)
      {
        document.upperright.src = document.arranger.a[1].value;
      }                  
      else if (document.arranger.a[2].selected)
      {
        document.lowerleft.src = document.arranger.a[2].value;
      }      
      else
      {
        document.lowerright.src = document.arranger.a[3].value;
      }                                           
       
                   
      if (document.arranger.b[0].selected)
      {                                       
        document.upperleft.src = document.arranger.b[0].value;
      }   
      else if (document.arranger.b[1].selected)
      {
        document.upperright.src = document.arranger.b[1].value;
      }                  
      else if (document.arranger.b[2].selected)
      {
        document.lowerleft.src = document.arranger.b[2].value;
      }      
      else
      {
        document.lowerright.src = document.arranger.b[3].value;
      }    
                                               
    }
    </SCRIPT>
    
    </HEAD>
    
    
    <BODY>
    
    
    <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
    
     <TR>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth2.gif" NAME="upperleft"></TD>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth3.gif" NAME="upperright"></TD>
     </TR>
    
     <TR>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth6.gif" NAME="lowerleft"></TD>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth7.gif" NAME="lowerright"></TD>
     </TR>
    
    </TABLE>
    
    <P>
    
    <FORM NAME="arranger">
    
    Select the two pieces that you want to swap:
    
     <BR>
    
     <SELECT NAME="a" ONCHANGE="swap();">
       <OPTION VALUE="upperleft"> Upper Left </OPTION>
       <OPTION VALUE="upperright"> Upper Right </OPTION>
       <OPTION VALUE="lowerleft"> Lower Left </OPTION>
       <OPTION VALUE="lowerright"> Lower Right </OPTION>
     </SELECT>
    
    
    
     <SELECT NAME="b" ONCHANGE="swap();">
       <OPTION VALUE="upperleft"> Upper Left </OPTION>
       <OPTION VALUE="upperright"> Upper Right </OPTION>
       <OPTION VALUE="lowerleft"> Lower Left </OPTION>
       <OPTION VALUE="lowerright"> Lower Right </OPTION>
     </SELECT>
    
    <P>
    
     <INPUT
       TYPE=button
       VALUE="Swap"
       ONCLICK="swap();">
    
    </FORM>
    
    </BODY>
    
    </HTML>
    
    
    Code (markup):

    I am sure I am missing a variable but I am not 100% what to write on it
     
    Maqui, Nov 21, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That's JavaScript, not Java (two completely unrelated languages); you have no DOCTYPE, and the script doesn't even appear to be written properly (and this is coming from someone who knows next to nothing about JavaScript). If I were you, I'd PM the link to this thread to deathshadow - he's a member here and could probably help you out if he's not too busy, especially if you tell him that I recommended him to you.

    Just make sure you ask him nicely though and be specific.
     
    Dan Schulz, Nov 22, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Ok, HTML 3 with netscape 4 specific javascript - yeah, that's not going to work today though it would have a decade ago.

    Though looking at the logic and what it's targeting - I can't for the life of me figure out what it is you are actually trying to do. You are changing the .src of the images to something that is not a path to an image? You're targeting each option for .selected instead of pulling the value from the SELECT?

    I don't get it.

    Of course, with the title 'assignment' I assume this is classwork? If so you're teacher needs a brick upside the head for teaching you to put all your tags in upper case, to not use a doctype, and a whole host of other stuff that is more 1997 than 2007.
     
    deathshadow, Nov 23, 2007 IP
  4. Maqui

    Maqui Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Well the code was made by me but you are probably right I was trying to use the different things from the lesson to make it work, let me start from the beginning here is the code given in order to make it work:

    
    <HTML>
    
    <HEAD>
    
    <TITLE>Assignment 11</TITLE>
    
    <SCRIPT>
    
    function swap ()
    {
                     
                                           
       
                   
       
                                               
       
                   
       
                                               
       
                   
       
                                               
       
                   
       
    
                     
                                           
       
                   
       
                                               
       
                   
       
                                               
       
                   
       
                                               
       
                   
       
    
                                              
                                                                
                                          
    }
    </SCRIPT>
    
    </HEAD>
    
    
    <BODY>
    
    
    <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
    
     <TR>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth2.gif"></TD>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth3.gif"></TD>
     </TR>
    
     <TR>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth6.gif"></TD>
       <TD><IMG BORDER=0 SRC="http://www.cs.utah.edu/classes/cs1040/images/Elisabeth7.gif"></TD>
     </TR>
    
    </TABLE>
    
    <P>
    
    <FORM NAME="arranger">
    
    Select the two pieces that you want to swap:
    
     <BR>
    
     <SELECT NAME="a">
       <OPTION> Upper Left </OPTION>
       <OPTION> Upper Right </OPTION>
       <OPTION> Lower Left </OPTION>
       <OPTION> Lower Right </OPTION>
     </SELECT>
    
    
    
     <SELECT NAME="b">
       <OPTION> Upper Left </OPTION>
       <OPTION> Upper Right </OPTION>
       <OPTION> Lower Left </OPTION>
       <OPTION> Lower Right </OPTION>
     </SELECT>
    
    <P>
    
     <INPUT
       TYPE=button
       VALUE="Swap"
       ONCLICK="swap();">
    
    </FORM>
    
    </BODY>
    
    </HTML>
    
    Code (markup):
    In reality all that I should need to work on is a script that would make it work, here are the hints given to us by the teacher:



    If you have trouble doing this, try approaching it like this:
    1. Begin with an implementation of swap that looks like this:
    function swap ()
    {
    var indexA = 0;

    alert(indexA);
    }

    In between the two statements, put some code that stores
    o 0 in indexA if "Upper Left" is selected in the first menu,
    o 1 in indexA if "Upper Right" is selected in the first menu,
    o 2 in indexA if "Lower Left" is selected in the first menu, or
    o 3 in indexA if "Lower Right" is selected in the first menu.

    This code should deal only with indexA and the first menu; it shouldn't refer to the second menu or the images.

    When you've done this correctly, you'll see the correct value of indexA pop up when you select from the first menu and click "Swap". When it is working correctly, get rid of the alert().

    2. You've now written the first block of code. Write a second block of code that declares a variable indexB and stores

    o 0 in indexB if "Upper Left" is selected in the second menu,
    o 1 in indexB if "Upper Right" is selected in the second menu,
    o 2 in indexB if "Lower Left" is selected in the second menu, or
    o 3 in indexB if "Lower Right" is selected in the second menu.

    This code should deal only with indexB and the second menu; it shouldn't refer to the first menu or the images.

    3. Now your function is able to determine the indexes (indexA and indexB) of the two images (which are stored in the array document.images) that need to be swapped. The third block should be the code that actually swaps them. This code should deal only with indexA, indexB, and the images; it shouldn't refer to either menu.



    Let me know if this makes sense, and thanks for any pointers.
     
    Maqui, Nov 23, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    I'm still not tracking - swap what images? You are showing four images, only two controls, but have nothing to swap them with... This doesn't make any sense at all.
     
    deathshadow, Nov 24, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Maqui, are you trying to change the location of the images on the page, rather than the images themselves by any chance?
     
    Dan Schulz, Nov 24, 2007 IP
  7. Maqui

    Maqui Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Quite right, I am trying to move the images thru the menu options and position the images according to the location desired.
     
    Maqui, Nov 24, 2007 IP
  8. Maqui

    Maqui Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    If you look at the link below it will show you what we are aiming to do, let me know if this helps or not I am not sure what to say at this point.

    http://www.cs.utah.edu/classes/cs1040/study/sixteen.html
     
    Maqui, Nov 27, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    The problem is I'm still not tracking what you are targeting with the two menus - you have four images, and two menus.... WHICH two images are the two menus supposed to effect? Are they both supposed to move all four? Pair? Only two of the images? The relationship between the TWO menus to the FOUR images... makes no sense.

    Either way, assigning 'src' to it is wrong if you are trying to deal with positioning... I'd be dropping a classname on them.
     
    deathshadow, Nov 27, 2007 IP
  10. Maqui

    Maqui Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    What needs to happen is this: there is an image of a person that is divided into four sections (upper left, upper right, lower left, lower right). There are two drop down menus that allow you to switch the pieces of the picture to scramble it up. The menu options are identical, the point is to select a portion of the picture in Menu A and switch it with the portion in Menu B (again, by using the drop down menus). You then click on a button located below the picture which is named (or its value is) "swap".

    Does it make sense?
     
    Maqui, Nov 27, 2007 IP