Again Game of Color

Again Game of color.
Now I have discovered vary nice use of my yesterdays post "Game of Color"
One can change the blog color just by rolling mouse on color strip provied.

See this Just Roll over mouse on the strip bellow.

Read More!

Game of Colors

Hi all

This what a simple example what you can create some intresting User Interface using javascript and CSS.I have used all div tags and one line javascript function to create this color piano.

Please find source here.

Please Copy folowing javascript code in your page header or script area or .js file

function changeColor(obj)
{
if(obj){
document.getElementById('mainColor').style.backgroundColor =obj.style.backgroundColor;
}
}

Please copy this HTML code in your page body.

<div style="position:static; left:0px;width: 500PX;height: 200px;border-left: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;background-color: #888888;" id="mainColor"></div><br /><div style="position:absolute;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #888888;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:50px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #FF0000;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:100px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #FFAA00;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:150px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #FFFF00;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:200px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #FFFFFF;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:250px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #00AAFF;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:300px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #00FFFF;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:350px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #ffffff;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:400px;width: 50px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #FF00FF;" onmousemove="changeColor(this);"></div><br /><div style="position:absolute;left:450px;width: 58px;height: 20px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;border-right: 1px solid #000000;background-color: #145784;" onmousemove="changeColor(this);"></div>

Note : This is vary important to know if you are developing a web application that "table" take more time than of "div" tag in any brouser. Read More!