Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Beim Hovern über eine Schaltfläche soll Sound abgespielt werden!





Frage

Hi Leutz, ich maaa wieder *grinzel* Und das Ganze ma wieder mit einem "kleinen" Problem: Ich arbeite mit FrontPage, da habe ich Schaltflächen eingefügt(Menü),die beim Hovern die Farbe der Fläche ändern. Jetzt kommts: Ich möchte net nur, dass sich die Farbe ändert, beim Hovern, sondern zusätzlich noch ein kleiner Sound eingespielt (.au) wird. Das heisst, 2 Dinge sollen beim Hovern passieren. Über Die Hilfe von Frontpage is net viel zu reissen, weil die in der Hilfe davon ausgehen, dass man keine eigenen Buttons verwendet, sondern deren Standarttexte. Kennt sich jemand damit aus und kann mir weiterhelfen?? Dankeeeeeee Greetz Daniel

Antwort 1 von Dr.Ma-Busen

Mahlzeit!

Schau dir das hier mal an
Das Beispiel auf der seite hat bei mir gerade aber nicht funktioniert (Opera 7.53 unter Linux) und das bei mir wird keine ausnahme sein. Es wird wahrscheinlich bei sehr vielen nicht abgespielt.

Wenn es immer gehen soll, dann soltest du dir überlegen die Buttons mit Flash zu machen. Bedenken in dem fall aber das nicht jeder Flash installiert hat, oder die wiedergabe von Flash nicht immer zuläst.

MfG
Dr. Ma-Busen

Antwort 2 von hitXLDaniel

Hi Dr.,

also, das soll schon unabhängig davon sein, ob manche das nicht hören können, oder doch. Denn Beim Hovern ändert sich eh das Bild. Ob man nun den Sound hören kann, ist bei jedem User nicht möglich.

Dennoch möchte ich den Sound gern zusätzlich einbauen. Mit Flash möchte ich jedoch vorerst nicht arbeiten.
Greetz
Daniel

Antwort 3 von TheHappyJoker

<html>

<head>
<title></title>
<script type="text/javascript">
<!--
function playSound() {
  document.all.base.src = "/sounds/hover.mp3"
}
//-->
</script>
</head>

<body>

<form>
<input type="button" name="button" value="Button mit Sound"
onClick="playSound()">
</form>

</body>

</html>


Anpassen (also die Quelle für die Sounddatei) und probieren :-) Das onClick="playSound()" kannste überalle einfügen (z.B. auch bei Bildern - natürlich funktioniert auch onmouseover="playSound()" u.s.w.).

<gruß thj>

Antwort 4 von TheHappyJoker

Ups, nach dem Testen funktionierte es wohl doch nicht so, wie es sollte... :-(

Schau mal hier: http://www.3sign.org/341/409/410/41035310.php

<gruß thj>

Antwort 5 von hitXLDaniel

Hi Joker,

Deine Linkempfehlung hab ich mir mal angesehen. Jetzt weiss ich net so wirklich, wo ich das Script genau einfügen soll. Unter "head" kommt wohl der erste Teil des Scriptes, "Head" ist bei mir aber ganz oben, da sind keine Buttons, ist das jetzt egal??

Dann den zweiten Teil des Scriptes unter Body, wo da genau, wo die Buttons liegen? Wenn ich dann die zweite Grafik angebe, worüber der Sound laufen soll, macht der mir noch nen zweioten Button hin, dadurch verschiebt sich alles....mennooo
Greetz
Daniel

Antwort 6 von Dr.Ma-Busen

JavaScript bereich heben keinen festen platz in ein HTML- Dokumnet. Aber man sollte, ausser es geht nicht anders, den Script bereich irgentdwo im Head des HTML- Documentes platzieren.

Und der andere Teil, kommt irgend wo in den Body, solltest ihn aber vor den Buttons machen damit der Browser keine Fehlermeldungen ausgibt, wenn jemand mit der Maus über solch ein fläche kommt und der Teil der des Dokumentes noch nicht geladen ist in dem sich das bgsound- Tag befindet.

MfG
Dr. Ma-Busen

Antwort 7 von hitXLDaniel

So, ich hab mal das Script mit meinen Buttons eingefügt. Jetzt bin ich aber gespannt, ob man daran erkennen kann, wo genau, ich das Script von Joker einfügen muss:


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
<base target="inhalt">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
</head>
<script language="JavaScript"> 
function click() 
{if (event.button==2) 
{alert('Sorry! Das geht leider nicht! Kontaktieren Sie mich: info@Daniel-Kienle.de')}} 
document.onmousedown=click
</script>
<body bgcolor="#000000" topmargin="0" leftmargin="10" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" onload="dynAnimation()">

<p>
<img border="0" src="images/daniel_kienle.jpg" width="468" height="60" vspace="5" hspace="5">                               
<img border="0" src="images/main_left_logo.JPG" width="130" height="65"></p>
<div align="center">
	<div style="position: absolute; width: 768; height: 70; z-index: 1; left: 0; top: 50; right: 0" id="layer1">
 <div align="center">
	<table border="0" width="750" height="70">
		<tr>
			<td align="center">
			<p align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
			<td align="center" width="70">
			<a onmouseover="var img=document['fpAnimswapImgFP14'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP14'].src=document['fpAnimswapImgFP14'].imgRolln" target="inhalt" href="startseite.htm">
			<img border="0" src="images/b_start.jpg" width="70" height="70" id="fpAnimswapImgFP14" name="fpAnimswapImgFP14" dynamicanimation="fpAnimswapImgFP14" lowsrc="images/b_start_2.jpg"></a></td>
			<td align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
			<td align="center" width="70">
			<a onmouseover="var img=document['fpAnimswapImgFP15'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP15'].src=document['fpAnimswapImgFP15'].imgRolln" target="inhalt" href="ueber_mich.htm">
			<img border="0" src="images/b_ueber_mich.jpg" width="70" height="70" id="fpAnimswapImgFP15" name="fpAnimswapImgFP15" dynamicanimation="fpAnimswapImgFP15" lowsrc="images/b_ueber_mich_2.jpg"></a></td>
			<td align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
			<td align="center" width="70">
			<a onmouseover="var img=document['fpAnimswapImgFP16'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP16'].src=document['fpAnimswapImgFP16'].imgRolln" target="inhalt" href="leistungen.htm">
			<img border="0" src="images/b_leistungen.jpg" width="70" height="70" id="fpAnimswapImgFP16" name="fpAnimswapImgFP16" dynamicanimation="fpAnimswapImgFP16" lowsrc="images/b_leistungen_2.jpg"></a></td>
			<td align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
			<td align="center" width="70">
			<a onmouseover="var img=document['fpAnimswapImgFP17'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP17'].src=document['fpAnimswapImgFP17'].imgRolln" target="inhalt" href="hoerproben.htm">
			<img border="0" src="images/b_hoerproben.jpg" width="70" height="70" id="fpAnimswapImgFP17" name="fpAnimswapImgFP17" dynamicanimation="fpAnimswapImgFP17" lowsrc="images/b_hoerproben_2.jpg"></a></td>
			<td align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
			<td align="center" width="70">
			<a onmouseover="var img=document['fpAnimswapImgFP18'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP18'].src=document['fpAnimswapImgFP18'].imgRolln" target="inhalt" href="kontakt.htm">
			<img border="0" src="images/b_kontakt.jpg" width="70" height="70" id="fpAnimswapImgFP18" name="fpAnimswapImgFP18" dynamicanimation="fpAnimswapImgFP18" lowsrc="images/b_kontakt_2.jpg"></a></td>
			<td align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
			<td align="center" width="70">
			<a onmouseover="var img=document['fpAnimswapImgFP19'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP19'].src=document['fpAnimswapImgFP19'].imgRolln" target="inhalt" href="links.htm">
			<img border="0" src="images/b_links.jpg" width="70" height="70" id="fpAnimswapImgFP19" name="fpAnimswapImgFP19" dynamicanimation="fpAnimswapImgFP19" lowsrc="images/b_links_2.jpg"></a></td>
			<td align="center">
			<img border="0" src="images/luecken.jpg" width="20" height="70"></td>
		</tr>
	</table>
</div></div>
	<p> </div>

</body>

</html>


Der Sound, der beim Hovern abgespielt werden soll, lautet: /sound/hoversound_menue.au. Die Hoverschaltflächen wechseln beim darüber fahren ihre Farbe. Beim Farbwechsel soll der Sound ertönen. Also, von "b_start.jpg" wird gehovert auf "b_start_2.jpg"


Antwort 8 von Dr.Ma-Busen

Also :)

Das
<bgsound id="base">
kannst du direckt nach dem einleitenden Body-Tag machen (<body....>)

Das Script
<script><!--

function playTunes() {
  document.all.base.src = "/uploads/chunk.mp3"
}
//-->
</script> 
kannst du zu den andere Scripten packen die sich schon im Head der Datei befinden. Am besten du ersetzt das durch dieses nutzlose Rechtsklick Script, weil das bringt dir eh nichts ausser genervte Besucher.

So und bei dem
onmouseover="playTunes()"
wird es etwas schwiriger, ich sehe da gerade das FP anscheinend den ganzen code zum wechseln der Grafiken in das onmousover bzw. in das onmousout packt. Du musst also bei jeden onmousover ganz am ende nach dem ..src; und vor dem " das playTunes() einfügen. Dann sollte es Funktionieren.


MfG
Dr. Ma-Busen

Antwort 9 von hitXLDaniel

also, irgendwas mach ich da falsch, ich halt Dummerle *g*

Es funktioniert noch immer nicht ....*heul*

...

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: