Sound + Bild

  • Sound + Bild

    Heyho!

    Ich habe zwar so meine Erfahrung mit html und CSS, doch in Sachen javascript... na jaaa~

    Und ich schätze, für meinen Wunsch sind Javascript-Kenntnisse notwendig, von daher, frag ich einfach mal. ;)

    Wie ist es möglich einen Sound bzw. eine Melodie mit einem Bild so zu verlinken, dass der Sound nur dann ertönt, wenn man mit der Maus darüber fährt?
    Hab' sowas öfters bei Werbebannern gesehen und wurde neugierig! Würde so etwas gerne in mein Forum einbauen, aber wie? Danke im Vorraus! ^^

  • Hm, ich hab mich noch nie wirklich mit Sound und dem Web beschäftigt, da das meiner Meinung nach nicht zusammengehört.
    Mit HTML 5 bekommt man jetzt aber einen <audio>-Tag. Den kann man per JS ansteuern.
    So klappt das ganze z.B.:

    Quellcode

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    5. </head>
    6. <body>
    7. <img src="imurl" id="test">
    8. <script type="text/javascript">
    9. var audioElement = document.createElement('audio');
    10. audioElement.setAttribute('src', 'sound.ogg');
    12. $('#test').mouseenter(function() {
    13. audioElement.play();
    14. });
    15. $('#test').mouseout(function() {
    16. audioElement.pause();
    17. audioElement.currentTime=0;
    18. });
    19. </script>
    20. </body>
    21. </html>
    Alles anzeigen


    Im IE passiert aber leider noch nichts.. Es gibt sicher noch eine bessere Möglichkeit, aber das ist die fortschrittlichste und einfachste..

  • Also gleich vorn weg, das du vorhast ist nicht unbedingt trivial, da es - ausser HTML5 - kein standardisierten weg zur Wiedergabe von Sound in JS gibt. Auch ein Hover-Event (Maus fährt über bestimmte Fläche) müsste man sich mit mehreren Events zusammenbasteln.

    Die Werbeanzeigen, die man heutzutage sieht (wenn man kein AdblockPlus-User ist) sind in der Regel Flash-Banner, da läuft das ganze dann wieder anders.

    Wenn man sich die ganze Arbeit vereinfachen will, kann man zu jQuery greifen, welche eigentlich alles abdeckt, was du brauchst:

    1. Ein Hoover-Event: [quote]$(this).hover(function(){},function(){});
      [/quote]
      stackoverflow.com/questions/262740/javascript-onhover-event
    2. Und eine Sound-Schnittstelle: plugins.jquery.com/project/sound