Verse Premium
Posts : 42 Join date : 2011-04-17
| Subject: Need help with new Piano Menu Fri Jun 17, 2011 2:38 am | |
| 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. |
|