Hallo zusammen,
würde gern ein Bild in meiner Webseite mit einer Sounddatei verlinken, die nur wiedergegeben wird wenn man mit der Maus darüberfährt.
Bin mit den Codes am Ende. Hat oder kennt einer so ein Code...
lg
Popupebene, auf die Seite der Popupebene füghst du einen Audioplayer ein, der sofort startet. Die Popupebene stellst du so ein,das diese nur sichtbar wird, wen du mit der Maus über dem Bild bist.
[...] Bin mit den Codes am Ende. Hat oder kennt einer so ein Code...[...]
Die Lösung, die Dir Janvo vorgeschlagen hat, ist ja mit Bordmitteln schnell realisiert und wenn sie Deinen Anforderungen entspricht, brauchst Du nicht mehr weiter zu lesen ...
Wenn ich Deine Frage richtig interpretiere, suchst Du aber eine Lösung, die den Sound im Hintergrund abspielt, wenn jemand z. B. ein Bild mit der Maus berührt?!
Trifft meine Vermutung zu, kannst Du das realisieren, wenn Du die u. a. Codeschnipsel benutzt.
Der Code funktioniert ohne Änderungen, wenn Du:
Andernfalls musst Du den Code entsprechend anpassen.
Zunächst legst Du im Head Bereich der Site 2 Funktionen als Javascript an. Die 1. startet den Sound bei MouseOver, die 2. stoppt den Sound bei MouseOff
-------------------------------------
<!-- Code fuer den Head Bereich -->
<script type="text/javascript">
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Stop();
}
</script>
-------------------------------------
Dann legst Du den folgenden Code in den Body Bereich der Site
------------------------------------
<!-- Code fuer den Body Bereich -->
<embed src='index_htm_files/music.wav' autostart=false width=1 height=1 id="sound1" enablejavascript="true"></embed>
<img src="index_htm_files/picture.jpg" onMouseOver="EvalSound('sound1')" onMouseOut="StopSound('sound1')">
------------------------------------
Das war's
Viel Spaß beim Website Design
Volltreffer....DANKE
@BeRo
Die Lösung bezieht sich ja quasi auf nur EIN Bild. (picture.jpg) Gibt es auch eine Möglichkeit mehrere Bilder bzw. BUTTONS mit dem gleichen Sound zu belegen. Mein Ziel ist es, dass bei jedem Mouseover ein kurzes "Plopp" zu hören ist. Wäre super, wenn du mir helfen könntest.
@ lars.windfelder
Hi, da hast Du ja eine echte Threadleiche ausgegraben.
Solche uralt Threads werden erfahrungsgemäß nur noch vom Threadersteller (hier hasentvinfo) und von den Mitgliedern beobachtet, die dort Kommentare hinterlassen haben.
Aber sei's drum. Deine Frage:
[...] Mein Ziel ist es, dass bei jedem Mouseover ein kurzes "Plopp" zu hören ist [...]
ist mit einem einfachen: "Kein Problem" zu beantworten. Mit ein paar Zeilen HTML und Scriptcode bist Du schnell am Ziel.
Lege Dir ein Hilfsverzeichnis zu Deinem Projekt an, das den gleichen Namen wie Dein Projekt hat. Heißt Dein Projekt z. B. "plop.web", muss das Hilfsverzeichnis "plop_web_files" heißen und es muss im selben Verzeichnis angelegt werden, in dem Du die Projektdatei speicherst.
In das Hilfsverzeichnis gehören alle Bilder (Thumbnails), die auf der entsprechenden Seite den "plop" Effekt bekommen sollen.
Weiter gehören die Audio Dateien da hinein. In unserem Beispiel sind das die Dateien "plop.wav", "plop.mp3" und "plop.ogg". Damit sind später alle halbwegs aktuellen Browser in der Lage, den Sound abzuspielen.
Zusätzlich gehört noch die Javascript Datei "mouseover.js" da hinein. Diese Datei legst Du selbst als einfache Textdatei an, die Du z. B. mit dem Windows eigenen "Notepad" erstellen kannst.
Die Datei muss folgenden Inhalt haben:
-----------------------------------------
<!--
function playclip() {
if (navigator.appName == "Microsoft Internet Explorer") {
if (document.all)
{
document.all.sound.src = "index_htm_files/plop.wav";
}
}
else {
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
}
}
//-->
---------------------------------------
Das folgende. Javascript gehört in den HTML Head der Seite, die die Audio Funktion haben soll:
--------------------------------------
<script type="text/javascript" src="index_htm_files/mouseover.js"></script>
-------------------------------------
In den HTML Body derselben Seite setzt Du den u. a. Code:
------------------------------------
<audio>
<source src="index_htm_files/plop.ogg"></source>
<source src="index_htm_files/plop.mp3"></source>
</audio>
<div id="sounddiv"><bgsound id="sound"></div>
------------------------------------
Schlussendlich erstellst Du für jedes Bild einen Platzhalter, dem Du jeweils im HTML Body einen individuellen HTML Code zuweist. Im folgenden Beispiel siehst du den Code für das Bild1 (Platzhalter1):
----------------------------------
<a href="#" onmouseover="playclip();"><img src="index_htm_files/Bild1.jpg" width="164" height="117" border="0" alt="image"></a>
---------------------------------
Die im Code angegebenen Werte für die Bildhöhe- und -Breite müssen natürlich angepasst werden. Der Verweis auf das Bild ist im Code gelb markiert. Der Name muss für die anderen Bilder entsprechend geändert werden.
Dass in den o. a. Codeschnipseln als Pfad immer "index_htm_files" angegeben ist und nicht '"plop_web_files", ist gewollt. Der WD sorgt bim Export- bzw. bei der Veröffentlichung des Projekts dafür, dass alle Dateien aus dem Hilfsverzeichnis "plop_web_files", in das Verzeichnis "index_htm_files" übertragen werden.
Danach stimmen alle Links, wie vorgesehen...
Das war's schon.
Hier kannst Du Dir die Seite aus dem o. a. Screenshot als online Demo ansehen
Die komplette Projektdatei kannst Du hier herunterladen. Enthalten sind neben der Projektdatei "plop.web", das Hilfsverzeichnis "plop_web_files", mit den Sounddateien, den Thumbnails und der JavaScript Datei.
Viel Erfolg