www.webdeveloper.com
Results 1 to 14 of 14

Thread: Creating onclick buttons to change an image

  1. #1
    Join Date
    Jul 2014
    Posts
    4

    Creating onclick buttons to change an image

    As a background on what I am trying to accomplish... I am trying to create a colorizer kind along the lines of what Behr paints has where you can change the colors of walls on a picture to visualize how they will look together. However, I am doing this for my employer to use for his steel structures clients to pick the colors of the steel and siding etc, that they want for their buildings.

    I have started by making an accordion menu with paint swatches to the left as hyperlinks and as you hover over them, they change the layer on the overall picture to the right that coordinates with the part of the menu you are in. So you select that you want to change the siding color on the left and then pick a color and the picture on the right is broken out into layers (siding, roof, downspouts, etc) and that layer changes to the color you select.

    The problem I am having, is that I want to convert my links to buttons and make them clickable instead of hover events to change the colors.

    HERE IS THE BEGINNING OF THE SIDING TAB CODE, I HAVE THE FIRST LINKS CONVERTED TO A BUTTON, AND THE OTHERS ARE STILL LINKS, SO YOU CAN SEE WHAT I HAD BEFORE:
    Code:
     <div id="tabs">
            <ul id="theMenu">
            	<li><a href="menu1.html" class="menuLink">Siding</a>
                	<ul>
                    	<form><div style="width:85px; padding:7px; font-size:70%; float:left; text-align:center;"><INPUT type="image" class="siding" src="uploads/images/HarborBlue.gif" alt="Harbor Blue" id="sidingHarborBlue" onclick="rolloverInit();" width="90" height="49"/><br /> Harbor Blue</div></form>
                        <div style="width:85px; padding:7px; font-size:70%; float:left; text-align:center;"><a href="contact.html" class="siding" id="sidingColonialRed"><img src="uploads/images/ColonialRed.gif" alt=" Colonial Red" id="sidingColonialRedImg" width="90" height="49"/></a><br />Colonial Red</div>
                        <div style="width:85px; padding:7px; font-size:70%; float:left; text-align:center;"><a href="contact.html" class="siding" id="sidingMediumBronze"><img src="uploads/images/MediumBronze.gif" alt="Medium Bronze" id="sidingMediumBronzeImg" width="90" height="49"/></a><br />Medium Bronze</div>
    HERE IS THE JAVASCRIPT CODE I WAS TRYING TO USE TO MAKE THE BUTTON CLICKABLE:
    Code:
    function OnClick(){
    	for(var i=0; i<document.buttons.length; i++){
    		var buttonObj = document.buttons[i];
    		if(buttonObj.className){
    			var imgObj = document.getElementById(buttonObj.className);
    			if (imgObj){
    				setupOnclick(buttonObj,imgObj);
    			}
    		}
    	}
    }
    
    function setupOnclick(thisButton,textImage){
    	thisButton.imgToChange = new Array;
    	thisButton.outImage = new Array;
    	
    	thisButton.imgToChange[0] = textImage;
    	thisButton.onclick = onClick;
    	
    	thisButton.outImage[0] = new Image();
    	thisButton.outImage[0].src = textImage.src;
    	
    	thisButton.outImage[0] = new Image();
    	thisButton.outImage[0].src = "uploads/images/" + thisButton.id + ".gif";
    }
    
    function onClick(){
    	for (var i=0;i<this.imgToChange.length; i++){
    		this.imgToChange[i].src = this.outImage[i].src;
    	}
    }
    AND HERE IS THE CODE FOR THE LAYERS OF THE PHOTO ON THE LEFT.
    Code:
    <div style="width:525px; height:300px;">
            <img src="uploads/images/sidingMetalBuilding.gif" alt="Virtual Siding Color" id="siding" style="z-index:3; position:relative; left:0px; top:0px; width:525px; height:300px;" /> 
            
            <img src="uploads/images/roofMetalBuilding.gif" alt="Virtual Roof Color" float="left" id="roof" style="z-index:2; position:relative; left:0px; top:-300px; width:525px; height:300px;" />
            
            <img src="uploads/images/downspoutsMetalBuilding.gif" alt="Virtual Downspout Color" id="downspouts" style="z-index:4; position:relative; left:0px; top:-600px; width:525px; height:300px;"/>
          
            <img src="uploads/images/trimsMetalBuilding.gif" alt="Virtual Trim Color" id="trims" style="z-index:1; position:relative; left:0px; top:-900px; width:525px; height:300px;"/>
            </div>
    I just seem to have run into a mental block after working on this for a few months in my spare time and could use some help. Here is the url in case you want to see the whole thing in action.

    http://www.keystonesteelstructures.c...isualizer.html

    Thank you in advance!!!!!!!!!!!!
    Last edited by jedaisoul; 07-12-2014 at 10:59 AM. Reason: code tags added

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Hm...

    Q1. Where are the buttons? I see only div tags.
    Q2. Why are you mixing css with the html? It makes code hard to read!

    Btw... You can remove all of the a tags (for tabs) and leave just divs and img elements. Then with a little css you can make your divs to appear to the end user as if it is a link, You can also add the onclick event and connect your JavaScript code with it.

    For example, here's the html and css for the first Trim's tab:

    HTML Code:
    <!doctype html>
    <html lang="en-US">
    <head>
       
       <title>Test</title>
       <meta charset="UTF-8" />
       <style>
          .tab { width: 90px; padding: 5px; }
          .tab:hover { cursor: pointer; }
          .tab p { margin: 0; padding: 0; font-size: 12px; text-align: center; } 
       </style>
       <script type="text/javascript">
          function sayHi() {alert("Hi, you have just clicked me!")};
       </script>
     
    </head>
    
    <body>
       <div class="tab" onclick="sayHi()"><img src="imgs/buttons/HarborBlue.gif" alt="HarborBlue" width="90px" height="40px" /><p>Harbor Blue</p></div>
    </body>
    
    </html>
    Last edited by tech_soul8; 07-05-2014 at 02:25 PM.

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Ok... If you still need some help I have build a site based upon your site. I added only a few basic elements to show you one way how can you do it.

    Here's html and css:

    HTML Code:
    <!doctype html>
    <html lang="en-US">
    <head>
       
       <title>Test</title>
       <meta charset="UTF-8" />
       <link rel="stylesheet" href="css/style.css" />
     
    </head>
    
    <body>
       <div id="tab_cont" class="tab_cont">
          <h2>Downspouts</h2>
          <ul id="downspouts">
             <li><img onclick = changePic(this) src="imgs/buttons/HarborBlue.gif" alt="HarborBlue" width="90px" /><p>Harbor Blue</p></li>
             <li><img onclick = changePic(this) src="imgs/buttons/ColonialRed.gif" alt="ColonialRed" width="90px" /><p>Colonial Red</p></li>
             <li><img onclick = changePic(this) src="imgs/buttons/MediumBronze.gif" alt="MediumBronze" width="90px" /><p>Medium Bronze</p></li>
          </ul>
          <h2>Trims</h2>
          <ul id="trims">
             <li><img onclick = changePic(this) src="imgs/buttons/HarborBlue.gif" alt="HarborBlue" width="90px" /><p>Harbor Blue</p></li>
             <li><img onclick = changePic(this) src="imgs/buttons/ColonialRed.gif" alt="ColonialRed" width="90px" /><p>Colonial Red</p></li>
             <li><img onclick = changePic(this) src="imgs/buttons/MediumBronze.gif" alt="MediumBronze" width="90px" /><p>Medium Bronze</p></li>
          </ul>
       </div>
       <div class="display_cont">
          <div class="content">
             <img id="disp_img" src="imgs/buildings/sidingMetalBuilding.gif" alt="sidingMetal" width="525px" height="300px" />
          </div>
       </div>
       <script type="text/javascript">
          
          function changePic(that) {
             var src_attrib = that.getAttribute('src');
             var src_pic = "imgs/buildings/" + src_attrib.substring(src_attrib.lastIndexOf("/") +1);
             
             document.getElementById('disp_img').setAttribute('src', src_pic);
          }
       </script>
    </body>
    
    </html>
    CSS file:

    Code:
    html, ul, p { margin: 0; padding: 0; }
    body { margin: 0 auto; width: 1200px; }
    html, body, ul {overflow: hidden; }
    
    .tab_cont, .display_cont { float: left; text-align: center; }
    
    ul { list-style: none; text-align: center; }
    .tab_cont ul li {
       display: inline-block;
       padding: 5px;
    }
    .tab_cont li p { font-size: 12px; }
    .tab_cont li img:hover { cursor: pointer; }
    
    .tab_cont { width: 400px; margin-right: 120px; }
    And here's the link to the test site so you can check how it works: www.ts-programs.eu5.org

    Note - once you click the tab with the specified color on the right side background image changes. I know this is not the way you want it to work. The way it currently works is just for the testing purposes.
    Last edited by tech_soul8; 07-05-2014 at 04:47 PM.

  4. #4
    Join Date
    Jul 2014
    Posts
    4
    Oh my word! I obviously was making this way more complex than it needed to be. THANK YOU!!!

    I had combined my CSS with the html because the website is PHP and I haven't had a whole lot of exposure to it and wasn't sure how it worked. I wanted to dive in and get working without messing the rest of the site up. I'm an administrative assistant going to school for web development and by boss just tossed this on my desk as a way to occupy any free time I have.

    Thank you so much for the help! I'm going to try to implement this in the next few days and then get back to you with any questions.

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    No problem.
    Good luck!

  6. #6
    Join Date
    Jul 2014
    Posts
    4
    Ok, I took a little bit to rewrite my file with some of your updates.

    The first problem that I immediately ran into is that my html seems to ignore the css file that you suggested. I had rewritten some of that to keep the styles that I had previously but I feel like it looks the way it's supposed to so I'm not sure why that's not working. I added some of the styles into some of the buttons just so the scrollbars aren't so long for now. That doesn't really bother me too much at this point though.

    The real problem I guess is when I try to use multiple layers. I copied the Javascript that you wrote for each layer and pointed it to the right directories. I just have the first button on each tab set up to work. And they each do individually, but when you click from tab to tab it seems to get lost in the javascript for the previous layer. When you click on the blue in siding and then the blue in roofing, nothing happens.

    I tried to come up with something like the code below to call each picture and replacement etc by their IDs and it seems I missed something somewhere because it doesn't actually work.

    function changePic(that) {
    var src_attrib = that.getAttribute('src');
    var src_pic = "uploads/images/" + thisLink.id + "/" + src_attrib.substring(src_attrib.lastIndexOf("/") +1);
    document.getElementById('siding').setAttribute('src', src_pic);
    }

    Here's the website again in case you want to take a look at it. I'm sorry the code is all messy with css in places.

    http://www.keystonesteelstructures.c...isualizer.html

    Thanks again for all the help. I really appreciate it!!!

    K

  7. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Well, currently it's 23 pm in Croatia so I'm pretty tired and I'm preparing to sleep but...

    My CSS and JavaScript code was just to show you one way you could do it and for setting up the testing site. If you want to build your site that way you have to adopt the code, not just copy-paste it.

    Currently I'm way to tired to check all of your code but if I remember correctly you have 4 main images in your Color Visualizer container. When a user pick up some color let's say for the Roof you replace the Roof part of the image with the one he chose.

    ...When you click on the blue in siding and then the blue in roofing, nothing happens...
    Well... Like I sad you have to adopt the script along with the directory structure and names of the images. The main idea behind the script is to get the right image from the right folder based on the tab's name. The script functions like this:

    1. When a user clicks on a tab and choose a color the image element gets passed to the changePic function via the this attribute.
    2. Script accepts one parameter named that (that is the image element passed to the calling code).
    3. Next it saves the src attribute into a variable and extracts the name of a color from it.
    4. It sets the path to the image file and choose the right image based on the extracted name from the src attribute.
    5. In final step it grabs the current image element from the Color Visualizer container and change it's source attribute thus resulting in image change.

    So if you want it to work you have to do next:

    You have to set up your directories to look something like this:

    imgs/Siding
    imgs/Roof
    imgs/Downspouts
    imgs/Trims

    then in each directory you put all of the images (colors) you have to offer for the particular category and name them correctly. Now comes to most important part for the script to work. Script has to be able somehow to recognize from which directory it should grab the image file. There are various ways you can do that. You can grab the img's parent ul element and extract it's id attribute or more simple you can prefix your img file names with the category they belong to. For example: imgs/Trims/TrimsHarborBlue.gif.

    The way script currently works is it always grabs the images from the imgs/buildings directory. That's the reason why you get the same images for the Trims, Roof, Siding....
    This is the part of the code I'm talking about:

    Code:
    var src_pic = "imgs/buildings/" + src_attrib.substring(src_attrib.lastIndexOf("/") +1);
    Sorry for such a "not so helpful" reply but as I sad I'm pretty tired and I'm going to sleep. If you still don't get it and if you stuck somewhere in the process feel free to ask any questions you have I will try to respond tomorrow or someone else will reply.

    Good luck!
    Last edited by tech_soul8; 07-11-2014 at 04:45 PM.

  8. #8
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Oh... I have just checked the way you have incorporated the script into your web site. It's WRONG! You can not have two or more functions with the same name. I see what you were after but you can not do it like that. You can have only one function named changePic which will do the job.

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Hi sammeen, thread hijacking is in internet terms rude, if you want someone to look at your web page then post in the appropriate forum, if you are advertising a product, which IMHO you are doing, you should read the forum rules as personal ads plugging products are not allowed unless you have permission.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  10. #10
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15
    I would recommend to kick out all this useless JS and use CSS.

    That's why there are pseudo classes like :active and :visited existing!

    Example:

    http://css-tricks.com/put-checkmarks...with-pure-css/
    http://css-tricks.com/a-non-annoying...ted-technique/

  11. #11
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Quote Originally Posted by Michael Pehl View Post
    I would recommend to kick out all this useless JS and use CSS.

    That's why there are pseudo classes like :active and :visited existing!

    Example:

    http://css-tricks.com/put-checkmarks...with-pure-css/
    http://css-tricks.com/a-non-annoying...ted-technique/
    I don't want to offend you but I think that you have missed the point here.

    Ok kelseylnn, based on how you have built your site this should be the solution to your problem:

    1. Create directories under the upload/images folder which will hold the tabs specified images.
    upload/images/Siding
    upload/images/Roof
    upload/images/Downspouts
    upload/images/Trims

    2. Place all the images into the appropriate folders and name them based on the buttons they represent
    uploads/images/Siding/HarborBlue.gif
    uploads/images/Siding/ColonialRed.gif
    uploads/images/Roof/HarborBlue.gif
    uploads/images/Roof/ColonialRed.gif
    etc..

    3. Inside of your Color visualizer container you have 4 images. Give them unique id names based on the tabs they depicts:
    Siding
    Roof
    Downspouts
    Trims

    4. Remove all of the changePic() functions you have inside the header tag and copy-past the following code:

    Code:
      function changePic(that) {
             var parent = that.parentNode.parentNode.id, src_attrib, src_dir, src_img, replace_img;
             parent = parent.charAt(parent.length -1);
             
             switch (+parent) {
                case 0:
                   src_dir = "upload/images/Siding/";
                   replace_img = document.getElementById('Siding');
                   break;
                case 1:
                   src_dir = "upload/images/Roof/";
                   replace_img = document.getElementById('Roof');
                   break;
                case 2:
                   src_dir = "upload/images/Downspouts/";
                   replace_img = document.getElementById('Downspouts');
                   break;
                case 3:
                   src_dir = "upload/images/Trims/";
                   replace_img = document.getElementById('Trims');
                   break;
                default:
                   break;
             }
             
             src_attrib = that.getAttribute('src');
             src_img = src_dir + src_attrib.substring(src_attrib.lastIndexOf("/") +1);
             replace_img.setAttribute('src', src_img);
          }
    Though I can not test it I think it should work now.

  12. #12
    Join Date
    Jun 2014
    Posts
    1
    What a tremendously helpful post! Thank you.

  13. #13
    Join Date
    Jul 2014
    Posts
    4
    Thank you so much tech_soul8! This is enormously helpful! It works now!

    And your explanations were also great since I'm trying to learn to follow what you're coding.

    I'm sorry we're so far apart and my posts catch you as you're going to bed. Thanks for making the effort even when you were tired. I really appreciate it!!!!

  14. #14
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Actually the code is pretty simple...
    I'm glad if I was able to help you. At the end the most important thing is that your web site actually works.

    You're welcome!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles