Zur Navigation

Musik mit Java Script abschalten

1 Moni

Hi,

vielleicht kann mir einer von Euch helfen...

Hier mein Java Script, kann mir einer sagen, wie ich jetzt den Button gegen meine eigene Grafik austauschen kann, so dass es dann funzt?

<script language="JavaScript"><!--
function musicOff() {
document.midi.stop()
}
function musicOn() {
document.midi.play()
}
function changeButton() {
if (document.onoff.B1.value=='Musik aus') {
document.onoff.B1.value='Musik an';
musicOff()
}
else {
document.onoff.B1.value='Musik aus';
musicOn()
}
}
//--></script>


<embed name="midi" src="http://www.ewetel.net/~sascha.drueppel/images/HPGRAFIK/Theme.mp3" hidden loop="-1" align="left">

<form name="onoff">

<div align="left">
<input type="button" value="Musik aus" name="B1"
onClick="changeButton()" onFocus="this.blur()"></div></form>

LG
Moni

27.05.2007 13:25

2 Rudy

kann mir einer sagen, wie ich jetzt den Button gegen meine eigene Grafik austauschen kann

Verwende z.B. einen <input type="image"> 

<input type="image" src="musikaus.gif" alt="Musik aus" onClick="changeButton()" onFocus="this.blur()">

Du könntest das auch mit einem Anchor <a> machen, den Du mit CSS stylest.

27.05.2007 13:36 | geändert: 27.05.2007 13:37

3 Moni

Hi Rudi,

dankschön für Deine schnelle Antwort!

Ich habe jetzt mal geändert aber leider stehe ich heute irgendwie auf der Leitung. Ich möchte dass die Musik von Anfang an läuft und ich diese per Button: Musik aus, ausschalten und aber auch per Button: Musik ein, wieder einschalten.

Ich kann sie jetzt zwar abschalten aber sie fängt jetzt immer wieder automatisch an *stöhn*

<script language="JavaScript"><!--
function musicOff() {
document.midi.stop()
}
function musicOn() {
document.midi.play()
}
function changeButton() {
if (document.onoff.B1.value=='Musik aus') {
document.onoff.B1.value='Musik an';
musicOff()
}
else {
document.onoff.B1.value='Musik aus';
musicOn()
}
}
//--></script>


<embed name="midi" src="http://www.ewetel.net/~sascha.drueppel/images/HPGRAFIK/Theme.mp3" hidden loop="-1" align="left">

<form name="onoff">

<div align="left">
<input name="B1" type="image" onFocus="this.blur()" onClick="changeButton()" src="images/HPGRAFIK/musikaus.jpg" alt="Musik aus" >
</div></form>

27.05.2007 14:00

4 Moni

Hier mal die Website, wie sie der Zeit ist:

http://www.ewetel.net/~sascha.drueppel/cats.html

Wie meinst Du das mit dem css?

LG
Moni

27.05.2007 14:06

5 Rudy

Das Problem ist, dass der input type="image" keinen value besitzt, und auf den prüft Dein Skript.

Du kannst das so lösen:

<script type="text/javascript">
function changeButton(sender) {
   if (sender.alt == 'Musik an') {
     document.midi.play();
     sender.src = "images/HPGRAFIK/musikaus.jpg";
     sender.alt = "Musik aus"; 
  } else {
     document.midi.stop();
     sender.src = "images/HPGRAFIK/musikan.jpg";
     sender.alt = "Musik an";
   }
}
....
<form>
<input type="image" src="images/HPGRAFIK/musikaus.jpg" onFocus="this.blur()" onClick="changeButton(this); return false;" alt="Musik aus" />
</form>

Ich vergaß, dass input type="image" wie submit wirken, deshalb braucht es das return false;, um das zu unterbinden.

Wie meinst Du das mit dem css?
Du könntest einen Link verwenden, den Du mit zwei CSS-Klassen den Hintergrund gibst, und einfach dann die Klasse des Links beim Umschalten änderst.

27.05.2007 14:26

6 Moni

Hi Rudi,

super, jetzt funzt es!

Vielen lieben Dank, das hätte ich nie hinbekommen...

Ich werde mir das mit dem css noch überlegen, denn Sascha soll jetzt erst selber ein bissel mehr lernen...

LG
Moni

27.05.2007 14:38

7 Moni

Hi Rudi,

kannst Du bitte mal schauen, ob es bei Dir funzt:

http://www.von-samian.de.vu/

Beim IE 6 anscheinend nicht...

LG
Moni

27.05.2007 16:26

8 Rudy

Beim IE 6/7 spielt er mir immer nur die ersten drei Töne an und beginnt dann von vorne. Komisch... liegt aber glaub ich nicht am Skript.

Lokal funktioniert dies hier einwandfrei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
</head>
<script type="text/javascript">
function changeButton(sender) {
   if (sender.alt == 'Musik an') {
     document.getElementById('midi').play();
     sender.src = "http://www.ewetel.net/~sascha.drueppel/images/HPGRAFIK/musikaus.jpg";
     sender.alt = "Musik aus"; 
  } else {
     document.getElementById('midi').stop();
     sender.src = "http://www.ewetel.net/~sascha.drueppel/images/HPGRAFIK/musikan.jpg";
     sender.alt = "Musik an";
   }
}
</script>
<body>
<embed id="midi" name="midi" src="Theme.mp3" loop="true" hidden="true" autostart="true" />
<form>
<input type="image" id="musiconoff" src="http://www.ewetel.net/~sascha.drueppel/images/HPGRAFIK/musikaus.jpg" onFocus="this.blur()" onClick="changeButton(this); return false;" alt="Musik aus" />
</form>
</body>
</html>

Teste es mal damit.

27.05.2007 17:05

9 Moni

Hi Rudi,

ist ja ein Html 4.01 Transitional und komischerweise funktioniert es bei mir und meinem Mann, beide mit IE7...

Komisch

27.05.2007 17:33

10 Moni

Hi Rudy,

wir haben es jetzt kompett abgeändert!

Vielen Dank für Deine Hilfe.

LG
Moni

27.05.2007 19:52