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.

Fifthfiend · 04-30-2010, 08:26 PM

I think you want sound.wav, not sound, in your onClick action.

EDIT No wait sorry I think you want sound1, it's supposed to match the name from your embed.

Nique · 04-30-2010, 08:37 PM

Hm. It is arranged like so...

Code:

<head>
		<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
		<title>My Webpage</title>	
	</head>
	
	<body>
	
<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> ...

But still no dice.

And yes my filepath is correct and yes I am actually using a file named 'sound.wav' that makes for reals noise. I'm using IE7 if that helps.

Fifthfiend · 04-30-2010, 09:03 PM

Huh. It apparently works fine in Firefox / IE8 / Chrome so IDK. Does that link work for you?

EDIT: Does this? Maybe the problem isn't the javascript so much as whatever plugin you have/don't have installed?

Nique · 04-30-2010, 09:58 PM

FFFFFFFFFFFFFFFFFuuuu...

Yeah that'd be it but I am checking it on another computer. Unfortunatly the fact that the OTHER computer doesn't have the right plugin means that all the computers that will be using it don't have it either.

synkr0nized · 05-01-2010, 04:19 PM

Quote:

Originally Posted by Fifthfiend

Huh. It apparently works fine in Firefox / IE8 / Chrome so IDK. Does that link work for you?

That does nothing in Firefox.
The page that directly embeds it does. Are you confident that script is correct?

This works in Firefox and IE, though. I suspect it is because of slight browser engine differences and Fifth's script setting the embed's autostart to false, preventing it from playing, whereas this person's waits until the rollover or click action occurs to bring the embed into existence, causing it to play.

However, Fifth's works in MSIE.
For cross-browser support, though, you may want to leave a dummy div that gets re-written with the embed on clicks/mouseovers as users navigate your soundboard.

Fifthfiend · 04-30-2010, 10:02 PM

Do you have quicktime installed? That's what mine uses to play 'em.

But yeah if this is some sort of serious project or w/ev you probably shouldn't count on people having whatever dumb plugin.

Which I guess is why every media site uses Flash, it's the dumb plugin that everybody has!

Nique · 04-30-2010, 10:08 PM

Yeah and basically any way to make this work that I have researched needs the plugin to play it right off the page... or else there is some insane magic way to do it in CSS.

Thanks for the help though! At least now I can stop wasting my time with USELESS JAVASCRIPT! GAH!

Fifthfiend · 04-30-2010, 10:16 PM

I guess if you wanna stick to doing it in java/html could figure out how to set it up to detect whether people have X plugin and if they don't be like "HEY YOU DON'T HAVE X PLUGIN YOU GOTTA GO GET DAT OR THIS SITE WON'T DO SHIT"

Nique · 05-01-2010, 12:01 AM

Here's a sort of weird thing. Off your site, it works. But if I try to play it locally out of just 'My Documents' or whatever, it brings up the Active-X error and then won't play at all. Could it have to do with the file types I'm using? It's just a .wav I found from the OS so it should be a thang...

04-30-2010, 08:26 PM	#2
Fifthfiend for all seasons Join Date: Feb 2004 Posts: 19,409	I think you want sound.wav, not sound, in your onClick action. EDIT No wait sorry I think you want sound1, it's supposed to match the name from your embed. __________________ check out my buttspresso Last edited by Fifthfiend; 04-30-2010 at 08:30 PM.

04-30-2010, 09:03 PM	#4
Fifthfiend for all seasons Join Date: Feb 2004 Posts: 19,409	Huh. It apparently works fine in Firefox / IE8 / Chrome so IDK. Does that link work for you? EDIT: Does this? Maybe the problem isn't the javascript so much as whatever plugin you have/don't have installed? __________________ check out my buttspresso Last edited by Fifthfiend; 04-30-2010 at 09:45 PM.

04-30-2010, 10:02 PM	#7
Fifthfiend for all seasons Join Date: Feb 2004 Posts: 19,409	Do you have quicktime installed? That's what mine uses to play 'em. But yeah if this is some sort of serious project or w/ev you probably shouldn't count on people having whatever dumb plugin. Which I guess is why every media site uses Flash, it's the dumb plugin that everybody has! __________________ check out my buttspresso Last edited by Fifthfiend; 04-30-2010 at 10:06 PM.

04-30-2010, 10:16 PM	#9
Fifthfiend for all seasons Join Date: Feb 2004 Posts: 19,409	I guess if you wanna stick to doing it in java/html could figure out how to set it up to detect whether people have X plugin and if they don't be like "HEY YOU DON'T HAVE X PLUGIN YOU GOTTA GO GET DAT OR THIS SITE WON'T DO SHIT" __________________ check out my buttspresso