​x
 
<html>
​
<head>
<title>HTML tutorial</title>
​
<style type="text/css">
body {
    background-color:#ddd;
}
div {
    float:left;
    margin:30px 0px 0px 10px;
    width:20px;
    height:20px;
    border:2px outset gray;
    cursor:pointer;
}
</style>
​
<script type="text/javascript">
    function changeColor(elm) {
        document.getElementsByTagName("body")[0].style.backgroundColor = elm.style.backgroundColor;
    }
    function changeButton(elm, evn) {
        if (evn) elm.style.border = "2px inset gray";
        else elm.style.border = "2px outset gray";
    }
</script>
​
</head> 
​
<body>
​
<noscript><p>Your browser doesn't have javascript enabled!<p></noscript>
​
<h4>Choose background color:</h4>
​
<div onclick="changeColor(this)" onmousedown="changeButton(this, true)" onmouseup="changeButton(this, false)" style="background-color:#ddd"></div>
<div onclick="changeColor(this)" onmousedown="changeButton(this, true)" onmouseup="changeButton(this, false)" style="background-color:#29b"></div>
<div onclick="changeColor(this)" onmousedown="changeButton(this, true)" onmouseup="changeButton(this, false)" style="background-color:#a43"></div>
<div onclick="changeColor(this)" onmousedown="changeButton(this, true)" onmouseup="changeButton(this, false)" style="background-color:#9b1"></div>
​
</body>
​
</html>