www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Color different areas of image using by clicking on color

  1. #1
    Join Date
    Jan 2010
    Posts
    37

    Color different areas of image using by clicking on color

    i have created the following: -

    http://www.ruks.co.uk/inscape.html

    As you see when you click on the colour red or blue it change the Pilasters but once a color is select you cannot select the other colour

    how can this been done

    any help be appriciated

    Thanks

    ruksana

    Here is the 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);
    }

    p {
    font-family:Verdana;
    font-weight:bold;
    font-size:11px
    }

    </style>

    <script language="javascript" type="text/javascript">
    function changeDivImage()
    {
    var imgPath = new String();
    imgPath = document.getElementById("div1").style.backgroundImage;

    if(imgPath == "url(bathroom.jpg)" || imgPath == "")
    {
    document.getElementById("div1").style.backgroundImage = "url(pilasters_red.jpg)";
    }
    else
    {
    document.getElementById("div1").style.backgroundImage = "url(pilasters_blue.jpg)";
    }
    }
    </script>

    </head>

    <body>
    <div id="div1">
    </div>
    <br /> Select Pilasters Colour <br/>
    <input type="image" onclick="changeDivImage()" src="red.jpg" />
    <input type="image" onclick="changeDivImage()" src="blue.jpg" />



    </body>
    </html>

  2. #2
    Join Date
    Jan 2010
    Posts
    77
    Hi bud
    You might want to try a different approach
    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);
            }
            p {
            font-family:Verdana;
            font-weight:bold;
            font-size:11px
            }
            </style>
            <script type="text/javascript">
    
          function changeDivImage(img){
           document.getElementById("div1").style.backgroundImage="Url('"+img+"')";
                                      }
    
            </script>
            </head>
            <body>
            <div id="div1">
            </div>
            <br /> Select Pilasters Colour <br/>
            <input type="image" onclick="changeDivImage('pilasters_red.jpg')" src="red.jpg" />
            <input type="image" onclick="changeDivImage('pilasters_blue.jpg')" src="blue.jpg" />
            </body>
            </html>

  3. #3
    Join Date
    Jan 2010
    Posts
    37
    thanks Vince616 - it works wonders

  4. #4
    Join Date
    Jan 2010
    Posts
    37

    Help with Javscript coding!!

    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 your 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

    can this happen with javascript

    hope this make sense

  5. #5
    Join Date
    Apr 2013
    Posts
    1
    hi

  6. #6
    Join Date
    Jan 2010
    Posts
    77
    Quote Originally Posted by ruks12 View Post
    Is their a code where your click on pilaster or doors and the colour palatte appears for the user to click on to change on image
    You could use an image map to get the desired effect you want but you would need to put the image in your page rather than setting it at the background of an element

    Quote Originally Posted by ruks12 View Post
    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
    With your current approach you would need to make different images with all combinations of colours for the doors and pilasters.

    You may want to consider a different approach, if you were to make gif or png images with just the different coloured doors and pilasters you could overlay then on the top of your original image thus giving the effect you want

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    What do you think about this variant* (See the source) with transparent doors ?
    For pilasters, shadows are expected... This should be possible with areas of color ?

    * It was built too quickly ! The image is to rework...
    Last edited by 007Julien; 04-25-2013 at 03:28 AM.

  8. #8
    Join Date
    Jan 2010
    Posts
    77
    Here is an example of the approach I mentioned
    Code:
    <html>
      <head>
         <style type="text/css">
    .colourDoor{
           position     : absolute;
           top          : 103px;
           left         : 175px;
               }
    .colourPilaster{
           position     : absolute;
           top          : 24px;
           left         : 143px;
                   }
         </style>
         <script type="text/javascript">
          function changeImage(id,img){
             document.getElementById(id).src=img
                                         }
         </script>
      </head>
      <body>
        <div id="div1">
          <img id="img1" src="bathroom.jpg">
          <img id="dr1" src="doors1.png" class="colourDoor">
          <img id="pl1" src="pilasters1.png" class="colourPilaster">
        </div>
        <div>
          Change door colour:
          <input type="button" onclick="changeImage('dr1','doors2.png')" value="blue">
          <input type="button" onclick="changeImage('dr1','doors3.png')" value="red">
        </div>
        <div>
          Change pilaster colour:
          <input type="button" onclick="changeImage('pl1','pilasters2.png')" value="blue">
          <input type="button" onclick="changeImage('pl1','pilasters3.png')" value="red">
        </div>
      </body>
    </html>
    You will need to download this attachment to get the images I made doors1.zip

  9. #9
    Join Date
    Jan 2010
    Posts
    37
    Thanks vince

    I have change it to the following - http://www.cubiclesandwashrooms.co.uk/inscape.html

    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 colour circle appear under doors

    is their a code i can use to do that and if so where can i find one

    hope this make sense

    Ruksana

  10. #10
    Join Date
    Jan 2010
    Posts
    77
    Hi Ruksana,
    I noticed it wasn’t displaying properly in firefox so had to tweak it a little, sorry about that I should have checked it before I posted the code, anyways here is a modified version which should work ok.
    And with a function to show/hide the buttons.
    Code:
    <html>
      <head>
         <style type="text/css">
    .cont{
           width        : 900px;
           height       : 302px;
         }
    .div1{
           position     : absolute;
         }
    .colourDoor{
           position     : absolute;
           top          : 88px;
           left         : 165px;
               }
    .colourPilaster{
           position     : absolute;
           top          : 10px;
           left         : 131px;
           border       : none;
                   }
    .men{
           display      : none;
        }
         </style>
         <script type="text/javascript">
          function changeImage(id,img){
             document.getElementById(id).src=img;
                                         }
          function showMenu(id){
             var oid=id=="mPl"?"mDr":"mPl";
             document.getElementById(id).style.display="block";
             document.getElementById(oid).style.display="none";
                               }
         </script>
      </head>
      <body>
        <div class="cont">
          <div class="div1">
            <img id="img1" src="bathroom.jpg">
            <img id="dr1" src="doors1.png" class="colourDoor">
            <img id="pl1" src="pilasters1.png" class="colourPilaster" usemap="#map1">
          </div>
        </div>
        <div id="mDr" class="men">
          Change door colour:
          <input type="button" onclick="changeImage('dr1','doors2.png')" value="blue">
          <input type="button" onclick="changeImage('dr1','doors3.png')" value="red">
          <input type="button" onclick="changeImage('dr1','doors1.png')" value="Clear">
        </div>
        <div id="mPl" class="men">
          Change pilaster colour:
          <input type="button" onclick="changeImage('pl1','pilasters2.png')" value="blue">
          <input type="button" onclick="changeImage('pl1','pilasters3.png')" value="red">
          <input type="button" onclick="changeImage('pl1','pilasters1.png')" value="Clear">
        </div>
        <map name="map1">
         <area shape="poly" coords="3,6,2,271,33,267,32,9" href="javascript:showMenu('mPl')">
         <area shape="poly" coords="144,7,144,250,197,244,197,7" href="javascript:showMenu('mPl')">
         <area shape="poly" coords="290,4,292,229,335,225,335,4" href="javascript:showMenu('mPl')">
         <area shape="poly" coords="417,2,417,208,435,208,435,1" href="javascript:showMenu('mPl')">
         <area shape="poly" coords="38,264,139,252,139,10788,99,35,113" href="javascript:showMenu('mDr')">
         <area shape="poly" coords="200,243,285,230,286,97,243,90,199,106" href="javascript:showMenu('mDr')">
         <area shape="poly" coords="339,222,411,210,4112,87,376,79,337,91" href="javascript:showMenu('mDr')">
        </map>
      </body>
    </html>

  11. #11
    Join Date
    Jan 2010
    Posts
    37

    Show Hide ColorSwatch

    Thanks for the tweek, as for the show hide this is what i want - please see attachment

    thanks

    Ruksana
    Attached Images Attached Images

  12. #12
    Join Date
    Jan 2010
    Posts
    77
    This should give you the effect you want
    Code:
      <head>
         <style type="text/css">
    .cont{
           position     : relative;
           width        : 900px;
           height       : 302px;
         }
    .div1{
           position     : absolute;
         }
    .colourDoor{
           position     : absolute;
           top          : 88px;
           left         : 165px;
               }
    .colourPilaster{
           position     : absolute;
           top          : 10px;
           left         : 131px;
           border       : none;
                   }
    .men{
           position     : absolute;
           top          : 320px;
           left         : 131px;
           display      : none;
        }
         </style>
         <script type="text/javascript">
          function changeImage(id,img){
             document.getElementById(id).src=img;
                                         }
          function showHideDiv(id){
             var oid=id=="mPl"?"mDr":"mPl";
             document.getElementById(id).style.display="block";
             document.getElementById(oid).style.display="none";
                                  }
         </script>
      </head>
      <body>
        <div class="cont">
          <div class="div1">
            <img id="img1" src="bathroom.jpg">
            <img id="dr1" src="doors1.png" class="colourDoor">
            <img id="pl1" src="pilasters1.png" class="colourPilaster">
          </div>
          <div id="mDr" class="men">
            Change door colour:
            <input type="button" onclick="changeImage('dr1','doors2.png')" value="blue">
            <input type="button" onclick="changeImage('dr1','doors3.png')" value="red">
            <input type="button" onclick="changeImage('dr1','doors1.png')" value="Clear">
          </div>
          <div id="mPl" class="men">
            Change pilaster colour:
            <input type="button" onclick="changeImage('pl1','pilasters2.png')" value="blue">
            <input type="button" onclick="changeImage('pl1','pilasters3.png')" value="red">
            <input type="button" onclick="changeImage('pl1','pilasters1.png')" value="Clear">
          </div>
        </div>
        <a href="javascript:showHideDiv('mDr')">Door Colour</a><br />
        <a href="javascript:showHideDiv('mPl')">Pilaster Colour</a>
      </body>
    </html>

  13. #13
    Join Date
    Jan 2010
    Posts
    37
    Thanks for all your help

  14. #14
    Join Date
    Jan 2010
    Posts
    37
    Hi, My code seams to not work - http://www.cubiclesandwashrooms.co.uk/inscape.html

    As you see the vanity shadow, does not colour in the image and when you click on doors or pilasters, the button appears twice

    any help be appreciate as i am totally confused

    thanks

    Ruksana

  15. #15
    Join Date
    Jan 2010
    Posts
    77
    This should cure your problem

    Code:
         <script type="text/javascript">
    	  var cid="mDr";
          function changeImage(id,img){
             document.getElementById(id).src=img;
                                         }
          function showHideDiv(id){
             document.getElementById(id).style.display="block";
             document.getElementById(cid).style.display="none";
    		 cid=id;
                                  }
         </script>
    V

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