1.murical.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel='stylesheet' type='text/css' href='musical.css'>
<script type='text/javascript' src="musical.js"></script>
<script type='text/javascript'>
window.onload = assignKeys
</script>
</head>
<body>
<DIV>
<DIV id='keyboard' class='musicalKeys'>
<DIV class='do musicalButton'></DIV>
<DIV class='re musicalButton'></DIV>
<DIV class='mi musicalButton'></DIV>
<DIV class='fa musicalButton'></DIV>
<DIV class='so musicalButton'></DIV>
<DIV class='la musicalButton'></DIV>
<DIV class='ti musicalButton'></DIV>
<DIV class='do musicalButton'></DIV>
</DIV>
<DIV id='console' class='console'></DIV>
</DIV>
</body>
</html>
2.musical.css
.body{
background-color:white;
}
.musicalKeys{
background-color:#ffe0d0;
boarder:solid maroon 2px;
width:536px;
height:68px;
top:24px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}
.musicalButton{
border:solid navy 1px;
width:60px;
height:60px;
position:relative;
margin:2px;
float:left;
}
.do{background-color:red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indigo;}
.ti{background-color:violet;}
div.console{
font-family:arial,helvetica;
font-size:16px;
color:navy;
background-color:white;
border:solid navy 2px;
width:536px;
height:320px;
top:106px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}
3.musical.js
function assignKeys(){
var keyboard=document.getElementById("keyboard");
var keys = keyboard.getElementsByTagName("DIV");
if(keys){
for(var i=0;i<keys.length;i++){
var key=keys[i];
var classes=(key.className).split(" ");
if(classes && classes.length>=2 && classes[1]=="musicalButton"){
var note=classes[0];
key.note=note;
//key.onmouseover=playNote;
key.onclick = playNote;
}
}
}
}
function playNote(event){
var note = this.note;
var console = document.getElementById("console");
if(note && console){
console.innerHTML += note + ".";
}
}