Wie kann ich in Magix Web Designer 9, meine Bilder mit Mouse-Over Effekt mit unterschiedlichen Soundstücken belegen?

happy.mike schrieb am 22.04.2015 um 13:04 Uhr

Hallo an die Magix Community,

ich habe hier schon einen passenden Thread gefunden, der mein Problem fast gelöst hat. Nur isses so, das sich dort nur die Erklärung auf mehrere Bildchen mit Sound bezieht. Meine Frage wäre aber: Wie kann ich in Magix Web Designer 9, meine Bilder mit Mouse-Over Effekt mit unterschiedlichen Soundstücken belegen?

Freue mich auf eure Mithilfe ;)

PS: Hier ist der LINK zum Thread mit der Soundbelegung bzw. nem "Plopp"-Effekt für mehrere Bildchen: http://www.magix.info/de/bild-mit-sound-beim-darueberfahren.wissen.772230.html

Kommentare

Ehemaliger User schrieb am 22.04.2015 um 15:55 Uhr

ich hatte das mit popupebene gelöst, sobald wie man mit der Mouse über Button war, kam ebene vonunten nach oben und hatte ich soundcloud drauf zum anhören, alternativ, kannst du dann auch audioplayer einsetzen.

BeRo schrieb am 22.04.2015 um 23:49 Uhr

Im Gegensatz zu dem Tipp, den ich dem von Dir verlinkten Thread gegeben habe, brauchst Du für Deinen Fall eine selektive Möglichkeit, Sounds abzuspielen.

Ich gehe mal davon aus, dass Du nicht jedes Mal einen Player anzeigen willst, der bedient werden muss, wenn ein Sound zu hören ist. Der Sound soll also vermutlich im Hintergrund abgespielt werden, solange sich der Mauszeiger auf einem Bild befindet?!

Schau Dir mal diese Demo an, da habe ich mit ein paar Zeilen JavaScript und HTML eine Lösung realisiert, die Du wohl 1:1 übernehmen kannst, wenn Du sie entsprechend erweiterst, um mehrere, verschiedene Musikstücke abspielen zu können.

Der für die Demo benutzte Code besteht aus 2 Teilen.

Teil 1 gehört in den HTML Head der Seite:

-----------------------------
<script type="text/javascript">
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Rewind(); 
  thissound.Play();
}
function StopSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Stop();
}
</script>

-----------------------------

Teil 2 gehört in den HTML Body der Seite:

-----------------------------
<embed src='index_htm_files/music.mp3' type="audio/mpeg";  src='index_htm_files/music.ogg' type="audio/ogg" 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 Script funktioniert in FF / IE / Opera / u.a. modernen Browsern.
Die Sounddatei muss dazu min. in den Formaten MP3 und OGG auf dem Webserver verfügbar sein.

Wenn Du mehrere, verschiedene Musikstücke wiedergeben willst, kannst Du den 2. Teil des Codes mehrfach benutzen. Natürlich musst Du dafür sorgen, dass in jedem Codeteil, also für jedes Musikstück unterschiedliche ID Werte (im Code blau markiert) verwendet werden.
Die Bilder, die du als MouseOver Trigger benutzt, werden über das IMG Tag eingebunden (letzte Zeile im Codeteil 2). Dabei muss der Name der Bilddatei (im Code orange markiert) jeweils angepasst werden.
Die einzelnen Musikstücke werden über das EMBED Tag referenziert (1. Zeile im Codeteil 2). Die Namen müssen ebenfalls an die einzelnen Musikstücke angepasst werden.

Alle für die Soundwiedergabe benötigten Dateien (Musik und Bilder) müssen im Verzeichnis "index_htm_files" abgelegt werden oder die im Code angegebenen Pfade müssen geändert werden.

Wenn Du möchtest, kannst Du Dir hier die Projektdatei und das Hilfsverzeichnis herunterladen, die ich für die Demo benutzt habe. Damit bist Du sicher in der Lage, Deine eigene Site entsprechend aufzubauen...

Viel Erfolg

Zuletzt geändert von BeRo am 22.04.2015, 23:49, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

happy.mike schrieb am 23.04.2015 um 13:52 Uhr

Wooow... Danke BeRo....es funktioniert wirklich =) Meine html erfahrungen sind mir schon seit Jahrzente erloschen... Vieeelen Vielen Dank ;)