HTML, Java, CSS help needed

Nique · 04-30-2010, 07:30 PM

I'm trying to create a soundboard like so and am trying to do it without flash.

I'm hitting a wall with the JavaScript. You can see by the code below that I've gotten some test images to preform rollover effects just fine;

HTML

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
		<title>My Webpage</title>	
	</head>
	
	<body>

		<center>

			<table border="1">
				<tr>
					<td>	
						<a href="#" class="rollover1" 

title="Sound"><span class="displace">Sound</span></a>
					<td>
						<a href="#" class="rollover2" 

title="Sound"><span class="displace">Sound</span></a>
					</td>
				</tr>
				
				<tr>
					
					<td>
						<a href="#" class="rollover2" 

title="Sound"><span class="displace">Sound</span></a>
					</td>
					
					<td>
						<a href="#" class="rollover1" 

title="Sound"><span class="displace">Sound</span></a>
					</td>
				</tr>
			
			</table> 
		
		</center>
	
	</body>

</html>

CSS

Code:

/* stylesheet.css - a simple style sheet */


a.rollover1 {     
	display: block;     
	width: 100px;     
	height:100px;     
	text-decoration: none;     
	background: url("test-button.png");     
	} 

a.rollover1:active {     
	background-position: -100px 0;     
	} 

a.rollover2 {     
	display: block;     
	width: 100px;     
	height:100px;     
	text-decoration: none;     
	background: url("test-button2.png");     
	} 

a.rollover2:active {     
	background-position: -100px 0;     
	} 

.displace {     
	position: absolute;     
	left: -5000px;     
	}

But to get sounds to play when I click on those images, I'm trying to include something like this;

JavaScript

Code:

<script>
function EvalSound(soundobj) {
  var thissound= eval("document."+soundobj);
  thissound.Play();
}
</script>

<embed src="sound.wav" autostart=false width=0 height=0 name="sound1"
enablejavascript="true">

<a href="#" onClick="EvalSound('sound1')">Click here to play sound</A>

I'm super novice esspecially with the JavaScript. When I try to incorporate the Java it doesn't seem to work. And, I mean, just so we're clear on exactly how novice I am, I'm still not 100% sure where the 'script' tags are supposed to go.

Help/ examples would be much appreciated.

EDIT: Edited per Fifthfiend's advice. Will post with results after my next attempt.