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 + ".";
?}
}