Sound + Bild

Master of Desert

Unregistered

Friday, December 31st 2010, 6:48pm

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!

Tim Eipert

Intermediate

Posts: 101

Saturday, January 1st 2011, 11:08am

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.:

HTML Code

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<img src="imurl" id="test">
<script type="text/javascript">
      var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'sound.ogg');
 
$('#test').mouseenter(function() {
audioElement.play();
});
$('#test').mouseout(function() {
audioElement.pause();
audioElement.currentTime=0;
});
</script>
</body>
</html>

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

BennyBunny

Master

Posts: 966

Sunday, January 2nd 2011, 1:03pm

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:

Ein Hoover-Event:

Quoted

$(this).hover(function(){},function(){});

http://stackoverflow.com/questions/26274…t-onhover-event
Und eine Sound-Schnittstelle: http://plugins.jquery.com/project/sound

Latest blogs: Oracle übernimmt Sun, Java SE 6 Update 12 verfügbar, Java 1.6.0 Update 10

FirePanther

Beginner

Posts: 7

Monday, January 3rd 2011, 4:38am

Ganz früher benutzte man doch immer bgsound und embed für die Soundwiedergabe:
http://de.selfhtml.org/html/dateiweit/hintergrundmusik.htm

Du könntest prüfen ob der Browser den AUDIO-Tag kennt und je nachdem handeln.

LG