width: 50px;
}
+#hexinput
+{
+ position: absolute;
+ top: 5px;
+ left: 10px;
+ width: 200px;
+ font-size: 11px;
+ font-weight: bold;
+
+ z-index: 1000;
+}
+
+/* ################################################################### */
+
#swatch
{
+ z-index: 1;
+
position: absolute;
- top: 18px;
- left: 148px;
- height: 30px;
- width: 30px;
+ top: 0px;
+ left: 135px;
+ height: 35px;
+ width: 65px;
+
+ background-color: rgb(0, 0, 0);
}
-#hexinput
+#swatch-red
{
+ z-index: 1;
+
position: absolute;
- top: 20px;
- left: 25px;
- width: 200px;
- font-size: 11px;
+ top: 0px;
+ left: 200px;
+ height: 35px;
+ width: 100px;
+
+ background-color: rgb(0, 0, 0);
+}
+
+#swatch-green
+{
+ z-index: 1;
+
+ position: absolute;
+ top: 0px;
+ left: 300px;
+ height: 35px;
+ width: 100px;
+
+ background-color: rgb(0, 0, 0);
+}
+
+#swatch-blue
+{
+ z-index: 1;
+
+ position: absolute;
+ top: 0px;
+ left: 400px;
+ height: 35px;
+ width: 100px;
+
+ background-color: rgb(0, 0, 0);
}
/* ################################################################### */
<body onload="setup()">
<!-- front -->
<div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
- <img src="Default.png" alt="" />
-
+
+ <div style="z-index: 500; position: absolute"><img src="Front.png" alt="" style="" /></div>
<div id="hexinput">HEX Code <input type="text" name="hexinput" id="hexinputf" size="6" maxlength="6" onblur="hexwatcher()" value="000000" /></div>
<div id="swatch"></div>
+ <div id="swatch-red"></div>
+ <div id="swatch-green"></div>
+ <div id="swatch-blue"></div>
- <div id="redinput"><input type="text" name="redinput" id="redinputf" style="color: red" size="3" maxlength="3" onblur="rgbwatcher('red')" value="0" /></div>
+ <div id="redinput"><input type="text" name="redinput" id="redinputf" style="color: red; background-color: green; border: none" size="3" maxlength="3" onblur="rgbwatcher('red')" value="0" /></div>
<div id="greeninput"><input type="text" name="greeninput" id="greeninputf" style="color: green" size="3" maxlength="3" onblur="rgbwatcher('green')" value="0" /></div>
<div id="blueinput"><input type="text" name="blueinput" id="blueinputf" style="color: blue" size="3" maxlength="3" onblur="rgbwatcher('blue')" value="0" /></div>
<div class="flip" id="fliprollie"></div>
<div class="flip" id="flip" onclick="show_back(event);" onmouseover="enterflip(event);" onmouseout="exitflip(event)";></div>
+
</div>
<!-- / front -->