www.webdeveloper.com
Results 1 to 14 of 14

Thread: Creating onclick buttons to change an image

Threaded View

  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

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