1.musical_dyn_keys.css
.musicalKeys{
?background-color:#ffe0d0;
?border:solid maroon 2px;
?position:absolute;
?overflow:auto;
?margin:4px;
}
.toplong{
?width:536px;
?height:68px;
?top:24px;
?left:24px;
}
.sidebar{
?width:100px;
?height:400px;
?top:24px;
?left:570px;
}
.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;
}
2.musical_dyn_keys.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
?<head>
??<title>Two Keyboards</title>
??<LINK rel='stylesheet' type='text/css' href='musical_dyn_keys.css'/>
??<SCRIPT type='text/javascript' src='musical_dyn_keys.js'></SCRIPT>
??<SCRIPT type='text/javascript'>
???window.onload=assignKeys
??</SCRIPT>
?</head>
?<body>
??<DIV id='keyboard-top' class='toplong musicalKeys'></DIV>
??<DIV id='keyboard-side' class='sidebar musicalKeys'></DIV>
??<DIV id='console' class='console'></DIV>
?</body>
</html>
3.musical_dyn_keys.js
var notes = new Array("do","re","mi","fa","so","la","ti","do");
function assignKeys(){
?var candidates = document.getElementsByTagName("DIV");
?if(candidates){
??for(var i=0;i<candidates.length;i++){
???var candidate = candidates[i];
???if(candidate.className.indexOf('musicalKeys')>=0){
????makeKeyboard(candidate);
???}
??}
?}
}
function makeKeyboard(el){
?for(var i=0;i<notes.length;i++){
??var key=document.createElement("DIV");
??key.className = notes[i] + " musicalButton";
??alert(key.className);
??key.note = notes[i];
??key.onclick = playNote;
??el.appendChild(key);
?}?
}
function playNote(event){
?var note = this.note;
?var console = document.getElementById('console');
?if(note && console){
??console.innerHTML +=note + ".";
?}
}