WCM Forum - java-script für wave abspielen bei mouseOver?

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - java-script für wave abspielen bei mouseOver? (http://www.wcm.at/forum/showthread.php?t=25377)

java-script für wave abspielen bei mouseOver?

hi,

ich möchte auf einer homepage wave-files automatisch abspielen lassen(am liebsten in einer loop), sobald der mauszeiger über einer bestimmten grafik steht. gleichzeitig soll auch diese grafik gegen eine andere getauscht werden.

das mit dem grafik-tauschen hab ich hinbekommen, aber wie läuft das mit dem wave-abspielen? hat jemand so ein script bzw. kennt wer die nötigen code-zeilen?

danke & lg

hara kiri

du definierst einen unsichtbaren layer, sobald der mouseover kommt, schreibst du den inhalt dieses layers neu und zwar so, daß ein wave abgespielt wird.

ein beispiel:

<script language="javascript">
function abspielen(musicfile) {
if (document.layers) { // verwendeter browser ie?
browser = "document.all['musiklayer']";
}
else { // ns oder modzilla verwendet?
browser = "document.getElementById('musiklayer')";
}
eval(browser + ".innerHTML='<html><body><embed src='" + musicfile + "' hidden='true' volume='100' loop='true'></body></html>");
}
</script>

<html>
<a onmouseover="abspielen('musik1.wav')">[img]button1.jpg[/img]</a>

<a onmouseover="abspielen('musik2.wav')">[img]button2.jpg[/img]</a>
<div id="musiklayer" style="position:absolute; top:0px; left:0px; height:1px; width:1px;"></div>
</html>

hoffe das hilft dir weiter. :)

@RaistlinMajere:

Herzlichen Dank für Dein script!

NUR: Es läuft nicht, da ich Deine HTML-Zeile nicht richtig einbinden kann:
Wie kommt Dein:
<html>
<a onmouseover="abspielen('musik1.wav')">[img]button1.jpg[/img]</a>

<a onmouseover="abspielen('musik2.wav')">[img]button2.jpg[/img]</a>
<div id="musiklayer" style="position:absolute; top:0px; left:0px; height:1px; width:1px;"></div>
</html>

richtig in diese meine Zeile (unten) für mein Rollover rein????
Anm.: Ich möchte nur einen einzelnen "Klicksound" beim drüberfahren über den unten definierten button...

<p align="center" style="word-spacing: 0; line-height: 100%; margin: 0">[img]michi_klick.gif[/img]</p>

danke nochmals!!!

oops, den <body> tag sollte man beim html-anteil ned vergessen, klar, daßt ihn ned gscheit einbinden kannst, sorry. ;)

wenn du nur einen kurzen klicksound abspielen willst (ich nehme mal an, für jeden button dasselbe soundfile, also kannst den übergabeparameter fürs file hier sparen, im gegensatz zu dem script fürn harakiri, wo für jeden button ein anderes wave abgespielt wird), mußt das loop natürlich auf "false" setzen (sonst hörst, sobald der eventhandler erfolgt ständig wiederholendes klicken), das script sieht dann für dich angepaßt so aus:

<script language="javascript">
function abspielen() {
if (document.layers) { // verwendeter browser ie?
browser = "document.all['musiklayer']";
}
else { // ns oder modzilla verwendet?
browser = "document.getElementById('musiklayer')";
}
eval(browser + ".innerHTML='<html><body><embed src='klick.wav' hidden='true' volume='100' loop='false'></body></html>");
}
</script>

<html>
<body>
<a onmouseover="abspielen()">[img]button1.jpg[/img]</a>

<a onmouseover="abspielen()">[img]button2.jpg[/img]</a>
<div id="musiklayer" style="position:absolute; top:0px; left:0px; height:1px; width:1px;"></div>
</body>
</html>

sodala, jetzt sollts aba gehn, wie gesagt, sorry, daß ich vorher den <body>-tag vergessen hab. :D

für deinen eigenen quelltext sähe das dann so aus (ich tu mal das ganze meiner meinung nach unnötige zeug weg, mit welchem prog arbeitest du denn?):

<p align="center">[img]michi_klick.gif[/img]</p>

also das stylesheet kannst dir sparen, das checkt normalerweise ein browser automatisch, den fett-tag [b] auch, ist ja hier kein text im spiel, sondern ein bild (wenn die width- und height-angaben den tatsächlichen abmessungen des bilds entsprechen, kannst dir diese angaben auch sparen, des checkt der browser normalerweise auch so).

@RaistlinMajere:

...geht leider immer noch nicht -habe Dir eine private email an deine GMX-Adresse geschickt!

danke!

die browserunterscheidung sieht so aus:

if (document.layers) {
document.layers("musiklayer")... ist für NS
}
else {
document.getElementById("musiklayer")... ist für IE, NS6, MODZILLA
}

erstmals vielen dank für deine hilfe!

bin leider nicht früher dazu gekommen deine tips zu implementieren...

leider steckt aber irgendwo noch der wurm drin, denn sobald die funktion abspielen() aufgerufen wird gibts eine fehlemeldung vom ie5.5:

In dem Skript auf dieser Seite ist ein Fehler aufgetreten.
Zeile: 10
Zeichen: 2
Fehler: ';' erwartet
Code: 0

ich versteh echt nicht wo da noch ein strichpunkt fehlen soll :confused:

so schaut der source bei mir aus:

<script language="javascript">
function abspielen(musicfile) {
if (document.layers) { // verwendeter browser ns?
browser = "document.layers('musiklayer')";
}
else { // verwendeter browser ie, ns6, modzilla?
browser = "document.getElementById('musiklayer')";
}
eval(browser + ".innerHTML='<html><body><embed src='" + musicfile +
"' hidden='true' volume='100' loop='true'></body></html>");
}
</script>

<html>
<body>
<a onmouseover="abspielen('chimes.wav')">[img]1.gif[/img]</a>

<a onmouseover="abspielen('chimes.wav')">[img]2.gif[/img]</a>
<div id="musiklayer" style="position:absolute; top:0px; left:0px; height:1px; width:1px;"></div>
</body>
</html>

bin echt ratlos...nochmals danke jedenfalls

hara kiri

also finden tu ich den fehler hier auch nicht, müßte eigentlich gehen, kannst jetzt nur auf bugsuche gehen und das script mal etwas vereinfachen [kannst generell aber auch einiges vereinfachen, da z.b. immer dasselbe file abgespielt werden soll, kannst dir den übergabeparameter "musicfile" sparen, somit entfällt auch die stringzusammensetzung und das eval wird unnötig (da liegt irgendwo der fehler). loop solltest du auf "false" setzen, sonst wiederholst ständig das wave]. um zu wissen, ob überhaupt was in den layer geladen wird (wie gesagt, müßte eigentlich), kannst ja noch zusätzlich einen kleinen text (in meinem fall "gehts oder gehts ned")reinladen, denn du dann sehen müßtest, während das wave auch geladen wird.
probiers mal nur fürn ie:

<script language="javascript">
function abspielen() { //nur für ie, ns6 und modzilla
document.getElementById("musiklayer").innerHTML="< html><body><embed src='chimes.wav' hidden='true' volume='100' loop='false'>gehts oder gehts ned</body></html>";
}
</script>

<html>
<body>
<a onmouseover="abspielen()">[img]1.gif[/img]</a>

<a onmouseover="abspielen()">[img]2.gif[/img]</a>
<div id="musiklayer" style="position:absolute; top:0px; left:0px; height:1px; width:1px;"></div>
</body>
</html>

sagma dann, obs geht.

so...habs jetzt zum laufen gebracht...wie du richtig vermutet hast war ein einfaches hochkomma im eval teil abgängig...

nachdem das geloopte wave aber auch wieder aufhören soll wenn der mauszeiger aus dem image rausgeht habe ich noch eine zweite funktion implementiert:

<script language="JavaScript"

</script>

<html>
<body>
<a onmouseover="playing('test.wav')" onmouseout="stop_playing()" >[img]1.gif[/img]</a>

<div id="musiclayer" style="position:absolute; top:0px; left:0px; height:1px; width:1px;"></div>
</body>
</html>

also vielen dank nochmals,

hara kiri

wenns sichs nur um ein soundfile handelt (also einen klick z.b.) würde ich sowieso das loop auf false setzen, dann ersparst dir die funktion stop-playing().