Need help with new Piano Menu

Premium Posts : 42 Join date : 2011-04-17

I have not yet bought the space for the website yet, so I cannot give a live demonstration.

Basically, I have a piano side menu, and OnMouseOver, the keys look like they have been pressed by swapping the image, and on two keys sound sort of plays...

The note sounds I have been limited to this website, as I cannot find anything better of which I am able to download...

When I tested the menu, everything works, but the sounds are very delayed....

HTML Code:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Untitled Document</title>
   <link rel="stylesheet" type="text/css" href="structure/Global.css" />
   <script type="text/javascript" src="structure/PianoMenu.js"></script>
</head>
<body>

<div id="PianoMenu" class="Container">
<div id="KeyE1" class="KeyE1" onmouseover="this.className='KeyE1-Over'" onmouseout="this.className='KeyE1'">
   <a href="#">
      Here
   </a>
</div>
<div class="KeyD1" onmouseover="this.className='KeyD1-Over'" onmouseout="this.className='KeyD1'">Here</div>

<div id="KeyC1" class="KeyC1" onmouseover="this.className='KeyC1-Over'; playSound('file:///C:/Users/TIMarshall/Desktop/Websites/AaronSweeney/Sounds/piano_middle_C.mp3');" onmouseout="this.className='KeyC1'">Here</div>

<div id="KeyB1" class="KeyB1" onmouseover="this.className='KeyB1-Over'; playSound('file:///C:/Users/TIMarshall/Desktop/Websites/AaronSweeney/Sounds/piano_B.mp3');" onmouseout="this.className='KeyB1'">Here</div>
<div class="KeyA1" onmouseover="this.className='KeyA1-Over'" onmouseout="this.className='KeyA1'">Here</div>
<div class="KeyG" onmouseover="this.className='KeyG-Over'" onmouseout="this.className='KeyG'">Here</div>
<div class="KeyF" onmouseover="this.className='KeyF-Over'" onmouseout="this.className='KeyF'">Here</div>
<div class="KeyE" onmouseover="this.className='KeyE-Over'" onmouseout="this.className='KeyE'">Here</div>
<div class="KeyD" onmouseover="this.className='KeyD-Over'" onmouseout="this.className='KeyD'">Here</div>
<div class="KeyC" onmouseover="this.className='KeyC-Over'" onmouseout="this.className='KeyC'">Here</div>

</div>
</body>
</html>

CSS Code

Code:: /** NOTE E1 **/
#PianoMenu .KeyE1 { text-align: right; padding-right: 5px; padding-top: 9px; width:184px; height: 22px; background:url(../Images/PianoMenu/EB-FirstChild.png) no-repeat }
#PianoMenu .KeyE1-Over { cursor: pointer; text-align: right; font-weight:bold; padding-right: 5px; padding-top: 9px; width:184px; height: 22px; background:url(../Images/PianoMenu/EB-FirstChild-Hover.png) no-repeat; }
#PianoMenu .KeyE1-Over, .KeyE1 a:link { color:#000000; text-decoration:none;}
#PianoMenu .KeyE1-Over, .KeyE1 a:visited { color:#000000; text-decoration:none;}
#PianoMenu .KeyE1, .KeyE1-Over a:hover { color:#000000; text-decoration: none; font-weight:bold;}

/** NOTE D1 **/
#PianoMenu .KeyD1 { text-align: right; padding-right: 5px; padding-top: 2px; width: 184px; height: 22px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyD1-Over { cursor: pointer; text-align: right; font-weight:bold; padding-right: 5px; padding-top: 2px; width: 184px; height: 22px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }

#PianoMenu .KeyC1 { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF.png) no-repeat; }
#PianoMenu .KeyC1-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF-Hover.png) no-repeat; }
#PianoMenu .KeyB1 { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB.png) no-repeat; }
#PianoMenu .KeyB1-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB-Hover.png) no-repeat; }
#PianoMenu .KeyA1 { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyA1-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyG { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyG-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyF { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF.png) no-repeat; }
#PianoMenu .KeyF-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/CF-Hover.png) no-repeat; }
#PianoMenu .KeyE { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB.png) no-repeat; }
#PianoMenu .KeyE-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/EB-Hover.png) no-repeat; }
#PianoMenu .KeyD { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA.png) no-repeat; }
#PianoMenu .KeyD-Over { width: 189px; height: 24px; background: url(../Images/PianoMenu/DGA-Hover.png) no-repeat; }
#PianoMenu .KeyC { width: 189px; height: 36px; background: url(../Images/PianoMenu/CF-LastChild.png) no-repeat; }
#PianoMenu .KeyC-Over { width: 189px; height: 36px; background: url(../Images/PianoMenu/CF-LastChild-Hover.png) no-repeat; }

Javascript code:

Code:: function playSound(soundfile) {
document.getElementById("KeyC1").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

function playSound(soundfile) {
document.getElementById("KeyB1").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

am guessing I need something in my code to preload the files, and something to say OnMouseOut stop playing... Whether or not my presumption is right or not, I do not know what to do nore how to do it.

» Highlighting Current Page in menu
» Edit Windows Right Click menu

Need help with new Piano Menu

Need help with new Piano Menu

Similar topics

Similar topics