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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Location
    USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Onclick IMG Array Help

    Hello,

    I am trying to use the onclick function to allow a user to change the color of a photo. Everything works but I need a more practical way than using a bunch of IF statements. Here is what I have so far. This is just the function part I can include it all if needed.

    Code:
     function changeImage(c_img)  {
      if(c_img == "cameo") {
        document.images("changingImage").src = "content/Image/Cameo.jpg";
      }  else {
       document.images("changingImage").src = "content/Image/GreenChili.jpg";
      }
    Now I need to add 12 more imgs to this. It works if I throw 12 more if(c_img...)but there must be a better way. I am kinda a newbie when it comes to Java..

    Thanks for any advice.

  • #2
    New to the CF scene
    Join Date
    Jun 2010
    Location
    USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    An array was not the correct route for this problem. The switch statement worked well.
    Code:
     function changeImage(c_img)  {
      switch(c_img)
      {
       case "image1":
          document.images("changingImage").src = "content/Image/image1.jpg";
          break;
       case "image2":
          document.images("changingImage").src = "content/Image/image2.jpg";
          break;
      }
    }

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb More questions ...

    Quote Originally Posted by jamz159 View Post
    Hello,
    ...
    Now I need to add 12 more imgs to this. It works if I throw 12 more if(c_img...)but there must be a better way. I am kinda a newbie when it comes to Java..

    Thanks for any advice.
    The switch method is a much better way to go.

    Question I have is:
    Are there 12 more <img> tags or are you trying to change the one image location with a change to the 'src=' value?
    There may be an easier way still to do what you wish to accomplish (if I understand your needs).

    With a slight modification to your code, you might try this:
    Code:
     var baseURL = 'content/Image/';
     var imgArray = ['','image1.jpg','image2.jpg','image3.jpg','image4.jpg']; // and so on
     function changeImage(c_img)  {  // pass c_img as a number 1..n of images
      document.images("changingImage").src = baseURL+imgArray[c_img];
     }

  • Users who have thanked jmrker for this post:

    jamz159 (06-22-2010)

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Location
    USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply, yes I just want the one image to change. I have 12images of colors (that are tagged with onMouseOver) when the user hovers over a certain color it changes that one image. I photoshoped and uploaded the one image in all 12 colors. Everything seems to be working so far with the switch, case statements.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by jamz159 View Post
    Thanks for the reply, yes I just want the one image to change. I have 12images of colors (that are tagged with onMouseOver) when the user hovers over a certain color it changes that one image. I photoshoped and uploaded the one image in all 12 colors. Everything seems to be working so far with the switch, case statements.
    What does your HTML look like?
    Seems like it might be even more efficient without the switch...case logic,
    but maybe not, depending on how you have the code set-up.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Location
    USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The HTML that is included with this page is very limited. I have contentHeader.ascx, ascx.cs .resx foot.ascx that get attached to every page on the site including this one. I do have another problem however, the onMouseOver does not work with FireFox browsers.
    Code:
    <h1>Something </h1>
    <br />
    <img alt="somthing something darkside " width="381" height="1" src="/content/About/Image/blueLine.jpg" />&nbsp;<br />
    <br />
    <br />
    <table cellspacing="5" cellpadding="5" width="98%">
        <tbody>
            <tr>
                <td width="220"><img alt="" width="1" height="2" src="images/design/spacer.gif" /></td>
                <td width="220"><img alt="" width="1" height="2" src="images/design/spacer.gif" /></td>
                <td width="220"><img alt="" width="1" height="2" src="images/design/spacer.gif" /></td>
            </tr>
            <tr>
                <td class="whiteTextMedium" valign="top" align="center"><script language="javascript">
    			
      function changeImage(c_img)  {
      switch(c_img)
      {
       case "color1":
          document.images("changingImage").src = "content/brand/Image/ImageColor1.jpg";
          break;
       case "color2":
          document.images("changingImage").src = "content/brand/Image/ImageColor2.jpg";
          break;
       case "color3":
          document.images("changingImage").src = "content/brand/Image/ImageColor3.jpg";
          break;
    
    etc etc.....
    
    </script>
                <p><img id="changingImage" border="0" name="changingImage" alt="blah blah blah " width="199" height="350" src="content/brand/Image/MainImage.jpg" /></p>
                <p>&nbsp;</p>
                <p class="whiteTextMedium">Create with the following paint options:</p>
                <p>
                <table border="0" cellspacing="1" summary="" cellpadding="1" width="172">
                    <tbody>
                        <tr>
                            <td width="91"><img onMouseOver="changeImage('color1')" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color1.jpg" /></td>
                            <td width="74"><img onMouseOver="changeImage(color2)" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color2.jpg" /></td>
                        </tr>
                        <tr>
                            <td><font size="1">color1</font></td>
                            <td><font size="1">color2</font></td>
                        </tr>
                        <tr>
                            <td><img onMouseOver="changeImage(color3)" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color3.jpg" /></td>
                            <td><img onMouseOver="changeImage('color4')" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color4.jpg" /></td>
    
    Etc etc.....
    I have an ul list with bullet points as well. Not much HTML I think I should take some Javascript classes. If i could only find some time! I have only used loose programming with IF statements and FOR loops.
    Last edited by jamz159; 06-25-2010 at 10:48 PM.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something else to consider ...

    I did not have access to your images and colors since you did not reference them anywhere,
    but this version works in MSIE and FF (untested on other browsers).
    I used CSS statements because <font> tags have been deprecated.

    Just change the 'baseURL' variable and the 'imgArray' elements to match your site and images.

    Code:
    <html>
    <head>
    <title>Image Changer</title>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=967958#post967958
    
       var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
       var imgArray = ['','11.jpg','12.jpg','13.jpg','14.jpg']; // Note: no comma after last entry
    // var baseURL = 'content/brand/Image/';
    // var imgArray = ['','ImageColor1.jpg','ImageColor2.jpg','ImageColor3.jpg']; // and so on
    
    function changeImage(c_img)  {  // pass c_img as a number 1..n of images
      document.getElementById("changingImage").src = baseURL+imgArray[c_img];
    }
    function createImage(info) {
      var str = '<img onMouseOver="changeImage('+info+')"';
          str +=' align="middle" width="50" height="50" ';
          str +=' src="'+baseURL+imgArray[info]+'">';
      return str;
    }
    </script>
    
    <style type="text/css">
    .tdInfo {
    	 font-size:0.6em;
    	 text-align:center;
    }
    </style>
    
    </head>
    <body>
    <h1>Something </h1>
    <hr>
    <img alt="somthing something darkside " width="381" height="1"
    <p>
    <table cellspacing="5" cellpadding="5" width="98%">
     <tbody>
      <tr>
       <td class="whiteTextMedium" valign="top" align="center">
        <img id="changingImage" border="0" name="changingImage"
            alt="blah blah blah " width="199" height="350" 
            src='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'>
       </td>
       <td>     
        <p>&nbsp;
        <p class="whiteTextMedium">Create with the following paint options:
        <p>
        <table border="0" cellspacing="1" summary="" cellpadding="1" width="172">
         <tbody>
          <tr>
           <td class="tdInfo">
            <script type="text/javascript">document.write(createImage('1'));</script>
            <br>color1
           </td>
           <td class="tdInfo">
            <script type="text/javascript">document.write(createImage('2'));</script>
            <br>color2
           </td>
          </tr>
          <tr>
           <td class="tdInfo">
            <script type="text/javascript">document.write(createImage('3'));</script>
            <br>color3
           </td>
           <td class="tdInfo">
            <script type="text/javascript">document.write(createImage('4'));</script>
            <br>color4
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>  
    </body>
    </html>
    Modify with your other code in place as needed.
    Post back if you don't understand any of the logic.

    Good Luck!


  •  

    Posting Permissions

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