✔ onmouseover Sound für alle Browser

DarkRaver

DarkRaver

Erfahrenes Mitglied
Hallo again :D
Ich wollte nochmal schnell fragen, wie man mittels OnMouseOver nen Sound machen kann, wenn man drübergeht über z.b. den Button.
Hier ist der aktuelle Code:
Code: 
    <a href="homepage.php"
    onmouseover="homepageover.src='homepage_over.png';"
    onmouseout="homepageover.src='homepage.png';">
    <img src="homepage.png" border="0" width="207"height="41" name="homepageover">
    </a>

Außerdem habe ich den emff player installiert also das wäre auch kein problem damit nen hintergrund-player zu erstellen. Nur leider weiß ich nicht wie^^
Bitte um Hilfe, danke :D
 
Zuletzt bearbeitet:
Joa stimmt :D
Okay ich habe jetzt eine playsound.js erstellt mit dem Inhalt:
http://pastebin.com/1GvA0Nsy
So...
Und eingebunden mit:
Code: 
    <a href="banlist.php"
    onmouseover="banlistover.src='banlist_over.png';playSound(0);"
    onmouseout="banlistover.src='banlist.png';">
    <img src="banlist.png" border="0" width="207"height="41" name="banlistover">
    </a>
Aber funktionieren tut es nicht^^
Weder IE, noch Firefox, noch Google Chrome noch Opera.
Bitte nochmal um Hilfe :D

//Edit:
Eingebunden im HEAD bereich mittels:
<script type="text/javascript" src="playsound.js"></script>
 
Hallo,

Direkt Javascript/HTML/CSS hilft dir da nicht weiter, es sei denn du wartest bis HTML 5 Browser kompatible ist,
aber auch dann musst du für die MAC User eine Browserweiche bauen *HUST* :D
Am besten rufst du beim onmouseover() eine swf(Flash) auf die deinen Ton abspielt,
alles andere ist momentan noch nicht Browser kompatible :(
 
Zuletzt bearbeitet:
Ich noch mal :D

Da es mich jetzt auch selber interessiert hat, wollte ich meine Lösung auch gleich mal selber ausprobieren,
und sie functioniert ganz gut, erstmal der Code, dann die Erklärung:
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Sound</title>
<script type="text/javascript">
  function sound_start(){
	 document.getElementById("sound_div").innerHTML = '<embed src="Unbenannt-1.swf" width="0px;" height="0px;" quality="high"></embed>';
  }
</script>
</head>

<body>

  <!-- In diesen div wird die Flash Datei geladen -->
  <div id="sound_div"></div>
  
  <!-- Beim überfahren startet die function -->
  <button onMouseOver="sound_start()">Sound</button>

</body>
</html>

Hier noch eine Online Demo:http://media-volex.de/demos-for-tutorialsde/index.html

Ich hab mir einen Ton meiner Wahl von einer Lizens freien Seite geladen,
dann in Flash eingefügt und gespeichert, so habe ich eine swf Datei bekommen,
dann nur noch einen leeren div erstellt in den meine swf geschreiben wird, wenn jemand über meinen Button fährt und fertig :)
 
Naja, wer's unbedingt braucht... bitte :p

Wenn ich Gelüste auf knackigen Sound habe, klink mich lieber in eines meiner Audio-Systeme ein (Hi-Fi, PC, portabler Mediaplayer) ;-)

Und welchen Mehrwert soll diese "Spielerei" dem Seitenbesucher nun bieten?

In meinen Augen ist sowas reine "Effekthascherei", deren Wirkung auch mal ganz schnell nach hinten los gehen kann, und den Besucher eher vergrault, als ihn auf die Seite zurückkehren zu lassen, weil er sich beispielsweise eventuell belästigt fühlt, bei jeder Mausbewegung zu einem Menüpunkt von einem Pseudo-Geräusch, -Klang, -Ton empfangen zu werden.

Was ihn interessiert und wonach er im Netz Ausschau hält, sind weiterführende Informationen zu einem Thema, mit dem er sich gerade näher beschäftigt, sei's beruflich oder privat, aber sicherlich keine quietschenden Buttons.

*justmy2cents*

mfg Maik
 
Maik hat gesagt.:
Und welchen Mehrwert soll diese "Spielerei" dem Seitenbesucher nun bieten?
Zum Vergrößern anklicken....

Schön das du es ansprichst :D Gibt da zwei Meinungen zu, die einen Sagen was wäre eine Flash Animation ohne Sound(ist ja wie TV ohne Sound),
die anderen sagen, das braucht kein Mensch da es nur stört,
ich selber habe dazu noch keine Meinung, aber ich würde lieber einen Navigationspunkt der mit HTML erstellt wurde und einen Javascript (Flash) Sound hat benutzen,
als einen Flash Button mit Sound der dann nicht SEO optimiert ist ;)

Muss der TS selbst entscheiden, seine Frage wurde ja nun beantwortet :)
 
Halli Hallöchen :D
Danke erstmal für eure Antworten.
Also eingebaut ist:
Code: 
<script type="text/javascript">
  function homepagesound(){
	 document.getElementById("HomepageButton").innerHTML = '<embed src="Menuoversound.swf" width="0px;" height="0px;" quality="high"></embed>';
  }
  function rankingsound(){
	 document.getElementById("RankingButton").innerHTML = '<embed src="Menuoversound.swf" width="0px;" height="0px;" quality="high"></embed>';
  }
  function banlistsound(){
	 document.getElementById("BanlistButton").innerHTML = '<embed src="Menuoversound.swf" width="0px;" height="0px;" quality="high"></embed>';
  }
</script>
Sowie:
Code: 
   <div id="HomepageButton" style="position:absolute; padding-top:300px;padding-left:49%;z-index:3;">
    <a href="homepage.php"
    onmouseover="homepageover.src='homepage_over.png';homepagesound();"
    onmouseout="homepageover.src='homepage.png';">
    <img src="homepage.png" border="0" width="207"height="41" name="homepageover">
    </a>
   </div>
Und halt die anderen beiden.
Leider musste ich feststellen, dass er den Sound nun in nem loop geschmissen hat aber das war ja mit "loop="false"" kein problem.
Das nächste Problem ist aber, dass er den Sound zwar abspielt aber den Button danach rausschmeißt. Zu sehen auf:
http://enter.hugaming.de/

Ich hoffe da könnt ihr mir noch mal helfen :D
 
Zuletzt bearbeitet:
DarkRaver hat gesagt.:
Das nächste Problem ist aber, dass er den Sound zwar abspielt aber den Button danach rausschmeißt.
Zum Vergrößern anklicken....
Die Ursache für dieses Problem findet sich zwischen Rückenlehne und Tastatur, denn wie schon gestern Abend in deinem anderen Thema, hast du auch hier den Beispiel-Code nicht aufmerksam studiert, und in deine Seite korrekt implementiert, denn darin wird innerHTML nicht auf den Button selbst, sondern ein gesondertes DIV angewendet.

Und wozu für jeden Link eine gesonderte JS-Funktion definieren, wenn in ihnen eh die gleiche SWF-Datei aufgerufen wird?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Hardc0re Un!t3D GaminG Enterpage</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/ico" />
<script type="text/javascript">
  function sound_start(){
	 document.getElementById("sound_div").innerHTML = '<embed src="http://media.hugaming.de/sounds/flash/Menuoversound.swf" width="0px;" height="0px;" loop="false" quality="high"></embed>';
  }
</script>
  </head>
  <body style="background-image: url(http://media.hugaming.de/enterpage/images/background.jpg);background-repeat: repeat;">
  
  <!-- In diesen div wird die Flash Datei geladen -->
  <div id="sound_div"></div>
  
  <table>
  <tr>
  <td>
   <div id="header" style="position:absolute;top:0px;left:0px;width:100%;height:250px;border:none;">
    <iframe src="http://media.hugaming.de/homepage/header/scroll.html" style="position:absolute; border:0px #000000 none;" scrolling="no" name="Homepage-Header" marginheight="0px" marginwidth="0px" height="250px" width="100%"></iframe>
   </div>
  </td>
  </tr>

  <tr>
  <td>
   <div id="HomepageButton" style="position:absolute; padding-top:300px;padding-left:49%;z-index:3;">
    <a href="homepage.php"
    onmouseover="homepageover.src='http://media.hugaming.de/enterpage/images/homepage_over.png';sound_start();"
    onmouseout="homepageover.src='http://media.hugaming.de/enterpage/images/homepage.png';">
    <img src="http://media.hugaming.de/enterpage/images/homepage.png" border="0" width="207"height="41" name="homepageover">
    </a>
   </div>
  </td>
  </tr>

  <tr>
  <td>
   <div id="BanlistButton" style="position:absolute; padding-top:350px;padding-left:49%;z-index:2;">
    <a href="banlist.php"
    onmouseover="banlistover.src='http://media.hugaming.de/enterpage/images/banlist_over.png';sound_start();"
    onmouseout="banlistover.src='http://media.hugaming.de/enterpage/images/banlist.png';">
    <img src="http://media.hugaming.de/enterpage/images/banlist.png" border="0" width="207"height="41" name="banlistover">
    </a>
   </div>
  </td>
  </tr>

  <tr>
  <td>
   <div id="RankingButton" style="position:absolute; padding-top:400px;padding-left:49%;z-index:1;">
    <a href="ranking.php"
    onmouseover="rankingover.src='http://media.hugaming.de/enterpage/images/ranking_over.png';sound_start();"
    onmouseout="rankingover.src='http://media.hugaming.de/enterpage/images/ranking.png';">
    <img src="http://media.hugaming.de/enterpage/images/ranking.png" border="0" width="207"height="41" name="rankingover">
    </a>
   </div>
  </td>
  </tr>
  </table>

   <div id=bgmusic" style="position:absolute;right:0px;bottom:0px;">
    <object type="application/x-shockwave-flash" data="emff_standard.swf" width="110" height="34">
     <param name="movie" value="emff_standard.swf">
     <param name="bgcolor" value="#000000">
     <param name="FlashVars" value="src=http%3A%2F%2Fmedia.hugaming.de%2Fmusic%2Fenterpage-bgmusic.mp3&amp;autostart=yes&amp;repeat=yes">
    </object>
   </div>
  </body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück