Color different areas of image using by clicking on color

This site is best viewed in a modern browser with JavaScript enabled.

Color different areas of image using by clicking on color

ruks12

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>

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

Vince616

Hi bud
You might want to try a different approach

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

ruks12

thanks Vince616 - it works wonders

ruks12

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

hekws

Vince616

ruks12;1263401 wrote:
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

ruks12;1263401 wrote:
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

007Julien

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

Vince616

Here is an example of the approach I mentioned

<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 [ATTACH]15515[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

ruks12

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

Vince616

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.

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

ruks12

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

thanks

Ruksana

The attachments of this post were removed during the platform migration in 2018

Vince616

This should give you the effect you want

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

ruks12

Thanks for all your help

ruks12

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

Vince616

This should cure your problem

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

ruks12

Thanks for the code, but it's not coloring the vanity shadow or the pilaster but coloring the doors - http://www.cubiclesandwashrooms.co.uk/inscape.html

what am I doing wrong

Thanks

Vince616

Hi ruks12,

Perhaps I should have posted all the page which I have done here, it works fine for me here.

<head>
     <style type="text/css">
.cont{
       position     : relative;
       width        : 900px;
       height       : 302px;
     }
.div1{
       position     : absolute;
     }
.colourDoor{
       position     : absolute;
       top          : 0px;
       left         : 0px;
           }
.colourVanity_Shadow{
       position     : absolute;
       top          : 0px;
       left         : 0px;
       border       : none;
           }

.men{
       position     : absolute;
       top          : -100px;
       left         : 180px;
       display      : none;
    }
     </style>
     <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>
  </head>
  <body>
  <ul>
  <li><a href="javascript:showHideDiv('mVs')">Vanity Shadow</a><br /><br/></li>
  <li><a href="javascript:showHideDiv('mDr')">Door Colour</a><br /><br/></li>
  <li><a href="javascript:showHideDiv('mPl')">Pilaster Colour</a></li></ul><br/>
  <div class="cont">
      <div class="div1">
        <img id="img1" src="bathroom.jpg">
        <img id="vs" src="vanity_shadow.png" class="colourVanity_shadow">
        <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="image" onClick="changeImage('dr1','mo_doors.png')" value="oak" src="mountain-oak.jpg">
        <input type="image" onClick="changeImage('dr1','bt_doors.png')" value="speckle" src="blue_tempest_speckle.jpg">
        <input type="button" onClick="changeImage('dr1','doors1.png')" value="Clear">
      </div>
      <div id="mPl" class="men">
        Change pilaster colour:
        <input type="image" onClick="changeImage('pl1','mo_pilasters.png')" value="oak" src="mountain-oak.jpg">
        <input type="image" onClick="changeImage('pl1','bt_pilasters.png')" value="speckle" src="blue_tempest_speckle.jpg">
        <input type="button" onClick="changeImage('pl1','pilasters1.png')" value="Clear">
    </div>
      <div id="mVs" class="men">
        Change  colour:
        <input type="image" onClick="changeImage('vs','mo_vanity_shadow.png')" value="oak" src="mountain-oak.jpg">
        <input type="image" onClick="changeImage('vs','bt_vanity_shadow.png')" value="speckle" src="blue_tempest_speckle.jpg">
        <input type="button" onClick="changeImage('vs','pilasters1.png')" value="Clear">
    </div>

  </div>
  </body>
</html>

ruks12

Hi,

On my design studio, http://www.cubiclesandwashrooms.co.uk/inscape.html

I currently have indiviual clear button - How can I add a ‘clear all’ button as well so if you want to reset the whole template and start again you can do so

Hope anyone can help

thanks

Ruksana