I have a blueprint of a building that I have scanned into my computer. I am looking to have a menu of some sort where I can select what room I want to color, and another menu to change the color. Any ideas?

I am interested in doing it myself, but I am running into some issues. I really want a drop down menu with room numbers and then another drop down menu with the color i want that room. I found a snippit of code that I am using, and have started tweaking it. The code will follow.

The boxes in my table are just for testing purposes. I have a trial of dreamweaver so I am just playing around with trying to pass different values to the java function I have defined, while using drop down menus.

If this just looks like it is too much work for a simple home project, then I would be interested in any premade software you know of.

EDIT: if you want to test this, the 3 number areas in the code where you can type the hex value of HTML color scheme work.

<html><head>
<body>
<script type="text/javascript" src="ddcolorposter.js"></script>
<form>
  <p>
    <label>
    <select name="room" id="room">
      <option value="colorbox1">Room1</option>
      <option value="colorbox2">Room2</option>
    </select>
    </label>
  </p>
#
    <input id="room1" onFocus="ddcolorposter.echocolor(this, room)" size="20" type="text" />
    <br>
#
<input id="room2" onFocus="ddcolorposter.echocolor(this, 'colorbox2')" size="20" type="text" />
<br>
#
<input id="room3" onFocus="ddcolorposter.echocolor(this, 'colorbox3')" size="20" type="text" />
<br>
#
<input id="room4" onFocus="ddcolorposter.echocolor(this, 'colorbox4')" size="20" type="text" />
  </p> 
</form>


<table width="200" border="1">
    <tr>
      <td><span style="background-color: rgb(255, 255, 255);" id="colorbox1" class="colorbox">____</span></td>
      <td><span style="background-color: rgb(255, 255, 255);" id="colorbox2" class="colorbox">____</span></td>
      <td><span style="background-color: rgb(255, 255, 255);" id="colorbox3" class="colorbox">____</span></td>
      <td><span style="background-color: rgb(255, 255, 255);" id="colorbox4" class="colorbox">____</span></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
</table>

<p>&nbsp;</p>
</body></html>

And here is the javascript:

function executeonload(functionref){
	if (window.addEventListener)
		window.addEventListener("load", functionref, false)
	else if (window.attachEvent)
		window.attachEvent("onload", functionref)
	else if (document.getElementById)
		window.onload=functionref
}

var ddcolorposter={
echocolor:function(inputobj, divID){
	this.targetobj=inputobj
	this.divobj=document.getElementById(divID)
	this.targetobj.onblur=function(){
	if (inputobj.value.search(/^[a-zA-Z0-9]{6}$/)!=-1) //if field contains valid hex value
		document.getElementById(divID).style.backgroundColor="#"+inputobj.value
	}
}
}
This article has been dead for over six months. Start a new discussion instead.