www.webdeveloper.com
Results 1 to 4 of 4

Thread: Is this possible in Javascript

  1. #1
    Join Date
    Jan 2010
    Posts
    51

    Is this possible in Javascript

    As you see from the link, - http://www.ruks.co.uk/inscape.html

    I have an image and two catagories

    Pilasters and Doors

    Is their a code where you click on pilaster or doors and the colour palatte appears for the user to click on to change on image

    also if you see i can only select one or the other color catagory but not both, i like user to be able to select color of pilaster and doors and both appear on image together

    can this happen with javascript

    hope this make sense

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    You could do it by having the page display the base image with separate images for the pilasters and doors overlaid on the base (in which everything except the colored areas would be transparent to allow the base image to show through). Then your buttons could change the overlays to show the various color combinations. So your code would look something like:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Inscape</title>
    <style type="text/css">
    #div1 {
    width:900px;
    height:300px;
    background-image:url(bathroom.jpg);
    position:relative; top:0; left:0; z-index:0;
    }
    #div2 {
     position:absolute; top:0; left:0; z-index:1;
     width:900px; height:300px;
    }
    #div3 {
     position:absolute; top:0; left:0; z-index:2;
     width:900px; height:300px;
    }
    p {
    font-family:Verdana;
    font-weight:bold;
    font-size:11px
    }
    img { margin:0; padding:0; }
    </style>
    <script type="text/javascript">
    
          function changeDivImage(img){
           document.getElementById("div1").style.backgroundImage="Url('"+img+"')";
      }
    	function changeDoorImg(img) {
    	 document.getElementById('doorImg').src = img;
    	}
    	function changePilasterImg(img) {
    	 document.getElementById('pilasterImg').src = img;
    	}
    </script>
    </head>
    <body>
    <div id="div1">
    <div id="div2"><img id="pilasterImg" src="pilasters_red.jpg" /></div>
    <div id="div3"><img id="doorImg" src="doors_blue.jpg" /></div>
    </div>
    <br /> Select Pilasters Colour <br/>
    <input type="image" onclick="changePilasterImg('pilasters_red.jpg')" src="red.jpg" />
    <input type="image" onclick="changePilasterImg('pilasters_blue.jpg')" src="blue.jpg" />
    
     <br /> Select Doors Colour <br/>
    <input type="image" onclick="changeDoorImg('doors_blue.jpg');" src="light_blue.jpg" />
    <input type="image" onclick="changeDoorImg('doors_green.jpg');" src="green.jpg" />
    
    </body>
    </html>

  3. #3
    Join Date
    Jan 2010
    Posts
    51
    I did you what you ask but as you can see - http://www.ruks.co.uk/inscape.html when you go onto the site the colours appear, i want the orginal image (black and white) to appear and then the colours to appear once the buttons are press

    hope this make sense

    Also i want to do a show hide function, where you click on the pilasters and the colour circles appear and then you click on doors, the pilasters colour close and the appear under doors

    hope this make sense

    Ruksana

  4. #4
    Join Date
    Mar 2011
    Posts
    1,160
    To open with just the B&W background image, you could use:
    Code:
    <div id="div1">
    <div id="div2"><img id="pilasterImg" /></div>
    <div id="div3"><img id="doorImg" /></div>
    </div>
    It's possible to do the kind of show/hide for the color buttons by clicking on the pilasters or doors by creating an image map, but it would be much more trouble than its worth - especially for the pilasters because the shapes are so complex. I think what you have now is a very good start because it's obvious how the color control buttons work. Good job!

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