Hi everyone,I would like to implement a drag and select feature in the page.I have tried to implement in the following url,but the javascript function work only for the mouse click. Here is the url of the page http://pekas.lbclients.info/SchedulesWorkManage.php
The working is as follows:
The user have to pick one of the color below the color title and when click-drag, the drag
area must fill with the picked color.Now it is working only with mouse click,not able to fill when mouse drag
Below is the code I placed
<?
$pageName = "Manage Work Schedule";
?><!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><?=$pageName?></title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<link href="includes/verticaltext.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function getStyle(tdobj, cssprop){
var colorId = tdobj.id;
var mydiv=document.getElementById(colorId);
//Cross browser function for retrieving global/external CSS properties
if (mydiv.currentStyle){ //IE
//alert( mydiv.currentStyle[cssprop])
var fillColor = mydiv.currentStyle[cssprop]
}
else if (document.defaultView && document.defaultView.getComputedStyle){ //Firefox
//alert( document.defaultView.getComputedStyle(mydiv, "")[cssprop])
var rgbCode = document.defaultView.getComputedStyle(mydiv, "")[cssprop]
var splitOBrkt = rgbCode.split('(');
var splitCBrkt = splitOBrkt[1].split(')');
var splitComma = splitCBrkt[0].split(',');
var fillColor = "#"+rgbToHex(splitComma[0],splitComma[1],splitComma[2]);
//alert(fillColor);
}
else{ //try and get inline style
// alert( mydiv.style[cssprop])
var fillColor = mydiv.style[cssprop];
}
document.getElementById('hideColor').value = fillColor;
}
/***********Convert RGB to HEX*********************/
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return "00";
n = Math.max(0,Math.min(n,255));
return "0123456789ABCDEF".charAt((n-n%16)/16)
+ "0123456789ABCDEF".charAt(n%16);
}
/***********Convert RGB to HEX*********************/
function StartDragSelect(obj)
{
var divId = obj.id
var bgcolor = document.getElementById('hideColor').value
//alert(bgcolor);
if(bgcolor == "")
{
alert("Please pick a color to fill");
return false;
}
if (obj.className == "scheduleOddNumber")
{
obj.className = "selectedOdd";
document.getElementById(divId).style.background = bgcolor;//"#FFFFFF";
selectNum++;
}
else if(obj.className == "selectedOdd")
{
obj.className = "scheduleOddNumber";
obj.style.background = "#FFFFFF";//"#DA5918";
selectNum--;
}
else if(obj.className == "scheduleEvenNumber")
{
obj.className = "selectedEven";
document.getElementById(divId).style.background = bgcolor;//"#FFFFFF";
selectNum++;
}
else if(obj.className == "selectedEven")
{
obj.className = "scheduleEvenNumber";
obj.style.background = "#F6F6F6";//"#DA5918";
selectNum--;
}
//alert(selectnum);
//document.getElementById("selectCount").innerHTML = selectNum;
for(i=1;i<23;i++)
{
document.getElementById('scheduleONumber'+i).onmouseover = document.getElementById('scheduleONumber'+i).onmousedown
}
obj.onmouseup = function()
{
for(i=1;i<23;i++)
{
document.getElementById('scheduleONumber'+i).onmousedown = document.getElementById('scheduleONumber'+i).onmouseover;
document.getElementById('scheduleONumber'+i).onmouseover = null;
}
}
}
</script>
</head>
<body>
<?
$classSchedules = "active";
include("_header_links.php");
include("subMenuShedules.php");
?>
<div id="container">
<div id="heading">
<h1>Manage Work Schedule</h1>
</div>
<div id="scheduleButtons">
<div id="Buttons">
<input name="button6" type="submit" class="commonButton" id="button6" value="Load" />
</div>
<div id="Buttons">
<input type="submit" name="button8" id="button8" value="Save" class="commonButton" />
</div>
<div id="Buttons">
<input type="submit" name="button" id="button" value="Save as new work schedule" class="commonButton" />
</div>
<div id="Buttons">
<input type="submit" name="button3" id="button3" value="Print" class="commonButton" />
</div>
<div id="Buttons">
<input type="submit" name="button9" id="button9" value="Auto-suggest breaks" class="commonButton" />
</div>
<div id="Buttons">
<input type="submit" name="button2" id="button2" value="Remove task" class="commonButton" />
</div>
<div id="Buttons">
<input type="submit" name="button5" id="button5" value="Add task" class="commonButton" />
</div>
</div>
<div class="scheduleArea" id="schedule">
<div class="scheduleAreaHeader" id="scheduleHeader">
<div class="scheduleFirstColmn" id="scheduleFirstColumn"> </div>
<div class="scheduleAreaHeading" id="scheduleHeading">6</div>
<div class="scheduleAreaHeading" id="scheduleHeading">7</div>
<div class="scheduleAreaHeading" id="scheduleHeading">8</div>
<div class="scheduleAreaHeading" id="scheduleHeading">9</div>
<div class="scheduleAreaHeading" id="scheduleHeading">10</div>
<div class="scheduleAreaHeading" id="scheduleHeading">11</div>
<div class="scheduleAreaHeading" id="scheduleHeading">12</div>
<div class="scheduleAreaHeading" id="scheduleHeading">13</div>
<div class="scheduleAreaHeading" id="scheduleHeading">14</div>
<div class="scheduleAreaHeading" id="scheduleHeading">15</div>
<div class="scheduleAreaHeading" id="scheduleHeading">16</div>
<div class="scheduleAreaHeading" id="scheduleHeading">17</div>
<div class="scheduleAreaHeading" id="scheduleHeading">18</div>
<div class="scheduleAreaHeading" id="scheduleHeading">19</div>
<div class="scheduleAreaHeading" id="scheduleHeading">20</div>
<div class="scheduleAreaHeading" id="scheduleHeading">21</div>
<div class="scheduleAreaHeading" id="scheduleHeading">22</div>
<div class="scheduleAreaHeading" id="scheduleHeading">23</div>
<div class="scheduleAreaHeading" id="scheduleHeading">24</div>
<div class="scheduleAreaHeading" id="scheduleHeading">25</div>
<div class="scheduleAreaHeading" id="scheduleHeading">26</div>
<div class="scheduleAreaHeading" id="scheduleHeading">27</div>
</div>
<div class="scheduleAreaOddMain">
<div class="scheduleAreaOdd" id="scheduleOdd">
<div class="scheduleOddContent" id="scheduleOContent">Rasmus Elestedt</div>
<div class="scheduleOddNumber" id="scheduleONumber">1</div>
<div class="scheduleOddNumber" id="scheduleONumber1" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber2" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber3" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber4" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber5" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber6" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber7" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber8" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber9" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber10" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber11" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber12" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber13" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber14" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber15" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber16" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber17" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber18" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber19" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber20" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber21" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber22" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber">1</div>
</div>
<div class="scheduleAreaOdd" id="scheduleOdd">
<div class="scheduleOddContent" id="scheduleOContent">Platschef Switch employee</div>
<div class="scheduleOddNumber" id="scheduleONumber">2</div>
<div class="scheduleOddNumber" id="scheduleONumber23" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber24" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber25" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber26" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber27" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber28" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber29" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber30" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber31" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber32" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber33" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber34" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber35" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber36" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber37" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber38" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber39" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber40" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber41" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber42" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber43" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber44" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber">2</div>
</div>
</div>
<div class="scheduleOddImg" id="scheduleOImg">
<img src="images/up-arrow.gif" width="22" height="20" />
<img src="images/down-arrow.gif" width="22" height="20" />
</div>
<div class="scheduleAreablank" id="scheduleBlank"> </div>
<div class="scheduleAreaEvenMain">
<div class="scheduleAreaEven" id="scheduleEven">
<div class="scheduleEvenContent" id="scheduleENumber">Nils-Gunnar Karlsson</div>
<div class="scheduleEvenNumber" id="scheduleENumber">1</div>
<div class="scheduleEvenNumber" id="scheduleENumber45" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber46" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber47" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber48" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber49" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber50" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber51" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber52" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber53" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber54" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber55" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber56" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber57" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber58" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber59" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber60" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber61" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber62" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber63" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber64" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber65" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber66" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber">1</div>
</div>
<div class="scheduleAreaEven" id="scheduleEven">
<div class="scheduleEvenContent" id="scheduleEContent">Frys Switch employee</div>
<div class="scheduleEvenNumber" id="scheduleENumber">2</div>
<div class="scheduleEvenNumber" id="scheduleENumber67" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber68" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber69" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber70" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber71" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber72" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber73" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber74" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber75" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber76" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber77" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber78" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber79" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber81" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber82" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber83" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber84" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber85" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber86" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber87" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber88" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber89" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleEvenNumber" id="scheduleENumber">2</div>
</div>
</div>
<div class="scheduleEvenImg" id="scheduleEImg">
<img src="images/up-arrow.gif" width="22" height="20" />
<img src="images/down-arrow.gif" width="22" height="20" />
</div>
<div class="scheduleAreablank" id="scheduleBlank"> </div>
<div class="scheduleAreaOddMain">
<div class="scheduleAreaOdd" id="scheduleOdd">
<div class="scheduleOddContent" id="scheduleOContent">Camilla Paulsson</div>
<div class="scheduleOddNumber" id="scheduleONumber">1</div>
<div class="scheduleOddNumber" id="scheduleONumber90" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber91" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber92" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber93" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber94" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber95" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber96" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber97" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber98" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber99" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber01" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber02" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber03" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber04" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber05" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber06" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber07" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber08" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber09" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber011" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber012" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber013" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber">1</div>
</div>
<div class="scheduleAreaOdd" id="scheduleOdd">
<div class="scheduleOddContent" id="scheduleOContent">Kassa & Golv Switch employee</div>
<div class="scheduleOddNumber" id="scheduleONumber">2</div>
<div class="scheduleOddNumber" id="scheduleONumber014" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber015" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber016" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber017" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber018" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber019" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber020" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber021" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber022" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber023" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber024" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber025" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber026" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber027" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber028" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber029" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber030" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber031" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber032" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber033" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber034" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber035" onMouseDown="StartDragSelect(this);"> </div>
<div class="scheduleOddNumber" id="scheduleONumber">2</div>
</div>
</div>
<div class="scheduleOddImg" id="scheduleOImg">
<img src="images/up-arrow.gif" width="22" height="20" />
<img src="images/down-arrow.gif" width="22" height="20" />
</div>
</div>
<div class="workArea">
<div class="wrkType" id="workType">Work Type</div>
<div class="Color" id="colour">Color</div>
<div class="wrkTypeContent" id="wrkTypeContent">Recess</div>
<div class="ColorValue1" id="ColorValue1" onclick="getStyle(this, 'backgroundColor')"></div>
<div class="wrkTypeContent" id="wrkTypeContent">Counter1</div>
<div class="ColorValue2" id="ColorValue2" onclick="getStyle(this, 'backgroundColor')"></div>
<div class="wrkTypeContent" id="wrkTypeContent">Counter2</div>
<div class="ColorValue3" id="ColorValue3" onclick="getStyle(this, 'backgroundColor')"></div>
<div class="wrkTypeContent" id="wrkTypeContent">Counter3</div>
<div class="ColorValue4" id="ColorValue4" onclick="getStyle(this, 'backgroundColor')"></div>
<div class="wrkTypeContent" id="wrkTypeContent">Fruits & Vegetables</div>
<div class="ColorValue5" id="ColorValue5" onclick="getStyle(this, 'backgroundColor')"></div>
<div class="wrkTypeContent" id="wrkTypeContent">Dairy</div>
<div class="ColorValue6" id="ColorValue6" onclick="getStyle(this, 'backgroundColor')"></div>
<div class="wrkTypeContent" id="wrkTypeContent">Meat</div>
<div class="ColorValue7" id="ColorValue7" onclick="getStyle(this, 'backgroundColor')"></div>
</div>
<input type="hidden" name="hideColor" id="hideColor" value="" />
</div>
</div>
<!--endof Bottom table -->
</body>
</html>