Javasript onmouseover sound

Hardy

Hab mal ne Frage!

Hab von Java leider keine Ahnung. Ich willte wissen wie ich in mein Java Menü sounds einbauen kann. Die Sound sollen aber nicht beim klicken, sondern bei Mausberührung ertönen, also nicht onmousecklick, sonden onmouseover. Kann mir einer sagen was ich einbauen muss, um angenommen die Datei" sound.mp3" abzuspielen???

Momentan sieht der Code für meine Menu so aus:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<link rel="stylesheet" type="text/css" href="../menustyle.css" media="screen, print" />
<script src="../menuscript.js" language="javascript" type="text/javascript"></script>

<a href="../index.php" onmouseover="setOverImg('1','');" onmouseout="setOutImg('1','');" onClick="this.blur();" target="_top"><img src="../images/buttons/button1up.png" border="0" id="button1" vspace="7" hspace="0"></a><br>
<a href="../reviews.htm" onmouseover="setOverImg('2','');" onmouseout="setOutImg('2','');" onClick="this.blur();" target="Inhalt"><img src="../images/buttons/button2up.png" border="0" id="button2" vspace="7" hspace="0"></a><br>
<a href="../tutorials.htm" onmouseover="setOverImg('3','');" onmouseout="setOutImg('3','');" onClick="this.blur();" target="Inhalt"><img src="../images/buttons/button3up.png" border="0" id="button3" vspace="7" hspace="0"></a><br>
<a href="../downloads.htm" onmouseover="setOverImg('4','');" onmouseout="setOutImg('4','');" onClick="this.blur();" target="Inhalt"><img src="../images/buttons/button4up.png" border="0" id="button4" vspace="7" hspace="0"></a><br>
<a href="../service.htm" onmouseover="setOverImg('7','');" onmouseout="setOutImg('7','');" onClick="this.blur();" target="Inhalt"><img src="../images/buttons/button7up.png" border="0" id="button7" vspace="7" hspace="0"></a><br>
<a href="../links.htm" onmouseover="setOverImg('5','');" onmouseout="setOutImg('5','');" onClick="this.blur();" target="Inhalt"><img src="../images/buttons/button5up.png" border="0" id="button5" vspace="7" hspace="0"></a><br>
<a href="../forum/" onmouseover="setOverImg('6','');" onmouseout="setOutImg('6','');" onClick="this.blur();" target="_top"><img src="../images/buttons/button6up.png" border="0" id="button6" vspace="7" hspace="0"></a><br>

Und die Datei menuscript.js:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:

/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "../images/buttons/";

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png","button5up.png","button6up.png","button7up.png");

overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png","button5over.png","button6over.png","button7over.png");


//*** NO MORE SETTINGS BEYOND THIS POINT ***//
totalButtons = upSources.length;

7

//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
	for ( x=0; x<totalButtons; x++ ) {
		buttonUp = new Image();
		buttonUp.src = buttonFolder + upSources[x];
		buttonOver = new Image();
		buttonOver.src = buttonFolder + overSources[x];
	}
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}


//preload();

GreenRover

also zum Beispiel:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<?php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onLoad="document.getElementById('musik').stop();">
<a onClick="document.getElementById('musik').play();" style="cursor:pointer;">Play</a>

<embed src='test.mp3' loop=false autostart="false" hidden="true" id="musik"></embed>
</body>
</html> ?>

wobei hier auf onclick ein Sound abgespielt wird.

nun ich gehe mal davon aus, das es imemr der selbe sound sein soll.
Dann msut du halt das
<embed src='test.mp3' loop=false autostart="false" hidden="true" id="musik"></embed> einfügen mit ur zur mp3

im body tag folgendes einfügen:
onLoad="document.getElementById('musik').stop();"
damit der titel nicht gleich anfängt ab zu spielen bei seiten laden.

so das du dann nur noch z.B.

onmouseover="setOverImg('7',''); document.getElementById('musik').play();" bei dir einfügen mußt.

Hardy

Super vielen Dank.

Tastensklave

Hallo, ich habe das gleiche Problem mit dem Sound per click.
Nur ist es bei mir so, dass ich gerne verschiedene Sounds bei verschiedenen menu-links abspielen möchte.
Hat da jemand irgendeine Lösing für mich, die ohne Flash auskommt?
Viel Dank

GreenRover

ist doch das gleiche prinzip...

einfach alles mehrfach:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript">
function init()
{
 document.getElementById('sound_button1').stop();
 document.getElementById('sound_button2').stop();
 document.getElementById('sound_button3').stop();
}
</script>
</head>

<body onLoad="init();">
<embed src='test1.mp3' loop=false autostart="false" hidden="true" id="sound_button1"></embed>
<embed src='test2.mp3' loop=false autostart="false" hidden="true" id="sound_button2"></embed>
<embed src='test3.mp3' loop=false autostart="false" hidden="true" id="sound_button3"></embed>


<a onClick="document.getElementById('sound_button1').play();" style="cursor:pointer;">Play</a>
<a onClick="document.getElementById('sound_button2').play();" style="cursor:pointer;">Play</a>
<a onClick="document.getElementById('sound_button3').play();" style="cursor:pointer;">Play</a>


</body>
</html>

cele4

Ich habe diesen Code auch verwendet. Funktioniert eigentlich alles bestens.

Doch leider verstehe ich nix von der ganzen Sache. Daher habe ich das Problem, dass ich beim Anhören des Sounds zwei mal auf das Bild klicken muss.

[url=http://www.tierlexikon.ch/22135_grossesmausohr.html]http://www.tierlexikon.ch/22135_grossesmausohr.html[/ur
l]

Soll jetzt keine Werbung sein. Oben bei Besonderes habe ich den Code eingesetzt um die Tierstimmen anhören zu können.

Ich hoffe dass mir jemand bei diesem Problem helfen kann. Ich bin leider in dieser Hinsicht eine absolute Niete unglücklich

ach ja, so sieht mein Code aus, habe ihn in eine Tabelle gepackt:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<div style="border:0px solid #000000; background-color:#FDF7E1; margin-right:20px;">
<table width="100%" border="0">
<tr valign="middle">
<td width="14%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:2px; margin-top:17px;"><p>Rufton:<a onClick="document.getElementById('musik').play();" style="cursor:pointer; font-family:verdana;">
</a><br>
</p></td>
<td width="10%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;"><a onClick="document.getElementById('musik').play();" style="cursor:pointer; font-family:verdana;"><img src=Bilder/soundicon.gif width="19" height="19">
<embed src='sound/grossesmausohr.mp3' loop=false autostart="false" hidden="true" id="musik"></embed></a>
</td>
<td width="19%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;">2x
Klicks</td>
<td width="57%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;">(Sound:
<a href="http://www.fledermausschutz.ch" target="_blank">Fledermausschutz.ch</a>)</td>
</tr>
</table>
</div>

Vielen DAnk
Gruss
Marcel

GreenRover

ok das ist jetzt merkwürdig, aber das einzigse was mir jetzt aufgefalle ist, das das embend im A tag ist... tuhe das mal direct unter das body tag.

PS links zur page sind immer sehr hilfreich und werden nicht als werbung aufgesfasst. Aber deine seite schaut gut aus, der code ist jedoch noch verbesserungswürdig.

cele4

Bin mir jetzt nicht sicher, ob das so korrekt ist.. Auf jeden Fall bringt es nicht das gewünschte Ergebnis.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

<div style="border:0px solid #000000; background-color:#FDF7E1; margin-right:20px;"> 
  <table width="100%" border="0">
    <tr valign="middle"> 
      <td width="14%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:2px; margin-top:17px;"><p>Rufton:<a onClick="document.getElementById('musik').play();" style="cursor:pointer; font-family:verdana;"> 
          </a><br>
        </p></td>
      <td width="10%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;"><embed src='sound/grossesmausohr.mp3' loop=false autostart="false" hidden="true" id="musik"></embed><a onClick="document.getElementById('musik').play();" style="cursor:pointer; font-family:verdana;"><img src=Bilder/soundicon.gif width="19" height="19"> 
        </a> </td>
      <td width="57%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;">(Sound: 
        <a href="http://www.fledermausschutz.ch" target="_blank">Fledermausschutz.ch</a>)</td>
    </tr>
  </table>
</div>

Sorry aber ich habe wirklich keine Ahnung von Sound einfügen

cele4

Hab ich was falsch gemacht?

Na ich versuche es nocheinmal:

War es so gemeint?

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<div style="border:0px solid #000000; background-color:#FDF7E1; margin-right:20px;"> 
  <table width="100%" border="0">
    <tr valign="middle"> 
      <td width="14%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:2px; margin-top:17px;"><p>Rufton: 
<br>
        </p></td>
      <td width="10%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;"><embed src='sound/grossesmausohr.mp3' loop=false autostart="false" hidden="true" id="musik"></embed><a onClick="document.getElementById('musik').play();" style="cursor:pointer; font-family:verdana;"><img src=Bilder/soundicon.gif width="19" height="19"> 
        </a> 
      </td>
      <td width="19%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;">2x 
        Klicks</td>
      <td width="57%" style="font-family:verdana; font-size:12px; padding:5px; margin-left:5px; margin-top:17px;">(Sound: 
        <a href="http://www.fledermausschutz.ch" target="_blank">Fledermausschutz.ch</a>)</td>
    </tr>
  </table>
</div>

sorry aber ich habe wirklich keine Ahnung davon.

danke 1000x für die Hilfe

Nachtrag:

Ich habe jetzt den ganz oben stehenden Code mal 1:1 reinkopiert. Muss ebenfalls zwei mal klicken...
http://tierlexikon.ch/index.php?id=22135_grossesmausohr

Auf Play klicken...

GreenRover

soweit wie ich das sehe, ist es immer noch falsch...

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onLoad="document.getElementById('musik').stop();">
<embed src='grossesmausohr.mp3' loop=false autostart="false" hidden="true" id="musik"></embed>

<!-- designcode usw -->

<a onClick="document.getElementById('musik').play();" style="cursor:pointer;">Play</a>

<!-- designcode usw -->
</body>
</html>

achte recht genau auf die anordnung.

vorallem auf die  das heist das embed muß grade zu oberst stehen.

cele4

Ist dieser Code auch PHP würdig?

Denn meine Page ist in PHP MySQL aufgebaut

GreenRover

das hat doch damit 0 zu tuhen...

PHP ist ja bloß eine serverseitige Sprache die das html mit JS zusammenstellt und das was ich hier gepostet habe ist nur html mit kleinen JS zügen.