www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18

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

  1. #16
    Join Date
    Jan 2010
    Posts
    48
    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

  2. #17
    Join Date
    Jan 2010
    Posts
    77
    Hi ruks12,

    Perhaps I should have posted all the page which I have done here, it works fine for me here.
    Code:
    <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>
    V

  3. #18
    Join Date
    Jan 2010
    Posts
    48

    add a clear all function

    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

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