Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Sicherheitshinweis ---> für registrierte Mitglieder <-
CSS/HTML5 Sound bei Mouseover
zurück: Dummes CSS-Anfängerproblem (Tabellenformatierung) weiter: Automatische Weiterleitung von veralteten Sprungmarken Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Feedback Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
Eberh@rd
Ergonomie-Junkie


Verfasst am:
13. Feb 2012, 13:57
Rufname:

CSS/HTML5 Sound bei Mouseover - CSS/HTML5 Sound bei Mouseover

Nach oben
       

Hi Forum,

hier einmal eine kurze Verständnisfrage zu diesem Beispiel, wie man beim Mouseover z.B. über Menüelemente oder Links kurze Sounds abspielen kann:

http://www.javascriptkit.com/script/script2/soundlink.shtml#current

In der Beschreibung steht dort, dass es sich um eine Lösung mit "nativem" HTML5 handelt.

Aber dann wird dort in "Step 1" doch ein Javaskript definiert, das schlussendlich den Sound abspielt -- oder sehe ich das falsch?

Vielen Dank schonmal,

Grüße Eberh@rd
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
13. Feb 2012, 15:07
Rufname:
Wohnort: Aachen


AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Hallo Eberh@rd,

hier ist das neue Audio-Element in HTML 5 beschrieben (ist übrigens eine gute Referenzseite für HTML5). Mit dem JavaScript habe ich es so verstanden, dass 1. ein Audio-Element erzeugt wird und 2. die Zuordnung des Sounds bei einem Mouseover. Zumindest für die zweite Funktion ist eben immer noch JavaScript notwendig.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Eberh@rd
Ergonomie-Junkie


Verfasst am:
13. Feb 2012, 15:59
Rufname:

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Hallo womaninweb und danke für die Antwort.

So ganz verstehe ich es noch nicht. Braucht man nun generell immer noch Javascript, um so einen Sound zu abzuspielen, oder geht es auch mit einer reinen HTML5/CSS-Lösung?

Hier z.B. http://www.solutionsinteractive.com/hovsond.htm
scheint mir auch kein Java Skript im Spiel zu sein.

Auch hier scheint das Audio nur über eine Zeile HTML realisiert zu sein:
http://pages.citebite.com/q1f4f8s6g5vqs

Dankbar für weitere Hinweise,

Grüße Eberh@rd
waldwuffel
Hardware & OS, Sicherheit


Verfasst am:
13. Feb 2012, 23:48
Rufname:
Wohnort: Bergisch Gladbach

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Moin, Eberh@rd,

Dein erstes Beispiel ist mit Frontpage 3.0 erstellt worden und voll von nicht-validem HTML-Code. Also lieber nicht mehr nachahmen.

In Deinem Ausgangslink wird tatsächlich viel mit JavaScript gearbeitet, bei einem Seitennamen wie javascriptkit.com ist das aber auch keine große Überraschung ?!? Very Happy

Sicherlich gibt es eine Lösung, die etwas weniger umsichtig im Ergebnis, aber dafür auch weniger Javascript-Code benötigt. so ganz ohne JS kann ich mir Dein Vorhaben nicht vorstellen. Immerhin willst Du ein Mouseover-Event [als Zustand] abfangen, und die dafür zuständige Instanz ist nun mal Javascript.

Gruß,
wuffel.

_________________
Dein Feedback ist mein täglich' Brot - lass mich nicht verhungern ...
Gast



Verfasst am:
14. Feb 2012, 00:33
Rufname:


AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Ich versteh es immer noch nicht Embarassed

In den beiden letzten Links geht es doch auch ohne Javascript? Und die HTML5 Spezifikation sagt doch gerade aus, dass das <audio> element "native audio playback within the browser" ermöglicht.

Ahsoo, Audio geht ohne Javascript -- aber HTML5 kann kein Mouseover erkennen? Nö, kann auch nicht sein, das geht doch mit einfachem CSS.

Also wie kriege ich jetzt in ca. drei Zeilen Code eine Mouseover-Erkennung mit Sound, nur mit CSS und HTML5 hin -- das sollte doch gehen?
Eberh@rd
Ergonomie-Junkie


Verfasst am:
14. Feb 2012, 00:35
Rufname:

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Wieso loggt mich das Forum immer aus? Obiger Beitrag ist natürlich

vom
Eberh@rd
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
14. Feb 2012, 12:09
Rufname:
Wohnort: Aachen

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Hallo Eberh@rd,

die Sache wäre einen Test wert. Das Problem ist nur, dass kaum ein Browser das wiedergeben kann. Ich habe mich mal diesbezüglich umgeschaut und bin da auf mehrere interessante Seiten gestoßen: Einmal die CSS Tricks, die verschiedene Möglichkeiten aufzeigen, wie ein Mouseover mit dem audio-Element in älteren Browsern läuft. Dies hat mich auf die aural stylesheets gebracht, die bereits seit CSS2 existieren - nachzulesen bei selfHTML oder beim W3C. Der Ansatz hat nur einen klitzekleinen Fehler: er funktioniert nur in Zusammenhang mit @media aural und dieser scheint Screenreader anzusprechen. Jedenfalls habe ich es so verstanden. Laut selfHTML soll die Sprachausgabe ab Opera 8 funktionieren; nun habe ich einen aktuelleren Opera, aber da tut sich rein gar nichts. Da CSS3 meines Wissens auch noch nicht verabschiedet ist, dürfte die Umsetzung deines Vorhabens in drei Zeilen noch einige Zeit auf sich warten lassen.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Eberh@rd
Ergonomie-Junkie


Verfasst am:
14. Feb 2012, 13:15
Rufname:

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Hallo womaninweb,

mir reichen hier die einigermaßen aktuellen Browser. Auf der von Dir verlinkten Seite steht ja: "So let's do it with HTML5, which can play sound through its <audio> element (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+)"

Nochmal, MouseOver lässt sich ja (ganz ohne Javascript) mit CSS detektieren/realisieren, wie z.B. hier:
http://www.dynamicdrive.com/style/csslibrary/item/image_bubbles_using_css3_transform_and_transitions/

Jetzt hätt ich nur noch gern einen "Click" sound beim Berühren/Vergrößern der Buttons.

Das müsste doch ganz einfach mit dem Audio Element gehen:
Code:
<audio controls preload="auto" autobuffer>
  <source src="click.wav" />
  <source src="click.mp3" />
</audio>

Nur wo müsste ich das im Quelltext einfügen?

Habe das "Gefühl", es müsste in das CSS irgendwo in diesen Bereich:
Code:
.bubblewrap li img:hover{

Question Question Question

Grüße Eberh@rd
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
14. Feb 2012, 16:22
Rufname:
Wohnort: Aachen

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Hallo Eberh@rd,

ohne dir dein "Gefühl" absprechen zu wollen: es geht nicht ohne JavaScript. Demnach würde per CSS einem HTML-Element ein anderes zugewiesen werden. CSS kann zwar einiges, aber das nicht. Es gibt (theoretisch) die Möglichkeit eine Sounddatei einem Element zuzuordnen, aaaaber es wird von keinem Browser unterstützt -> guckst du hier bei The Styleworks und im Detail hier.
Im Übrigen finde ich das Ergebnis mit dem Sound bei einem Mouseover doch recht mäßig, wenn man sich die Beispielseite zu den CSS Tricks anschaut bzw. anhört. Es hebt auch nicht wirklich die Nutzbarkeit der Seite.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky


Zuletzt bearbeitet von womaninweb am 14. Feb 2012, 19:12, insgesamt einmal bearbeitet
waldwuffel
Hardware & OS, Sicherheit


Verfasst am:
14. Feb 2012, 16:36
Rufname:
Wohnort: Bergisch Gladbach

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Moin, Eberh@rd,

CSS kann das MouseOver-Event insofern auswerten, als dass es dem zugewiesenen HTML-Element neue CSS-Eigenschaften zuweisen kann. Du möchtest aber beim MO ein völlig neues [Audio-]Element erstellen. Und das kann CSS alleine wirklich nicht.

Alternativ könnte es ja möglich sein, an ein [immer unsichtbaren] Audio-Element das [wie auch immer geartete] Event zum Starten des Playbacks zu vermitteln. Aber auch das kann CSS nicht. Very Happy

Gruß,
wuffel.

_________________
Dein Feedback ist mein täglich' Brot - lass mich nicht verhungern ...
Eberh@rd
Ergonomie-Junkie


Verfasst am:
14. Feb 2012, 19:26
Rufname:

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

O.k. danke euch, ich sehe nun, dass auch das HTML5-Audio-Element nach wie vor mittels Javascript gesteuert bzw. "aktiviert" werden muss. Dann werde ich mich diesbezüglich mal auf die Suche machen.

Vollständigkeitshalber hier noch ein Link zu einer gerade gefundenen Übersichtsseite:

Different Ways to Play a Sound from a Web Page

Keine Sorge, das wird hier keine lärmende Webseite werden. Es geht nur um einen kurzen metallischen Klick, beispielsweise so wie hier: mouseclick-low-pitch-quiet.wav

Vielen Dank nochmal für die hilfreiche Diskussion,

Grüße Eberh@rd.
Marsupilami72
Office-VBA-Programmierer


Verfasst am:
15. Feb 2012, 10:42
Rufname:
Wohnort: Goslar

AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Selbst sowas würde mich als User tierisch nerven!

Ich habe auf meinen Rechnern grundsätzlich alle Systemsounds abgeschaltet - die sollen nur Geräusche machen, wenn ich es will.
Ich kenne in meinem Bekanntenkreis nicht wenige, die das genau so handhaben.

_________________
Gruß,
Martin

Bitte keine Fragen per PN - dafür ist das Forum da!
Eberh@rd
Ergonomie-Junkie


Verfasst am:
15. März 2012, 19:27
Rufname:


AW: CSS/HTML5 Sound bei Mouseover - AW: CSS/HTML5 Sound bei Mouseover

Nach oben
       

Nur damit die Information nicht verloren geht, bzw. hier an Ort und Stelle gefunden wird:

Unten mal zwei Seiten bzw. Designer, die (nach langer Suche) anscheinend sehr kompetent zu dem Thema aus dem Betreff sind:
Grüße Eberh@rd
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - CSS Menü inklusive Anleitung für Grafiken 0 maninweb 10819 22. Dez 2008, 15:02
maninweb Tutorial - CSS Menü inklusive Anleitung für Grafiken
Keine neuen Beiträge HTML & CSS Forum: CSS wird in Chrome nicht angezeigt (aber im IE) 8 8SAP 1085 19. Feb 2013, 15:09
8SAP CSS wird in Chrome nicht angezeigt (aber im IE)
Keine neuen Beiträge HTML & CSS Forum: Umstieg: Frames -> CSS 2 muhmaff 1168 11. Jun 2012, 18:40
muhmaff Umstieg: Frames -> CSS
Keine neuen Beiträge HTML & CSS Forum: CSS Problem mit Wrapper 1 dibuslaa 1275 29. März 2012, 10:47
womaninweb CSS Problem mit Wrapper
Keine neuen Beiträge MS Expression Web Forum: Link mit Sound 2 Kaisy 692 15. Jan 2012, 20:08
Kaisy Link mit Sound
Keine neuen Beiträge HTML & CSS Forum: CSS urheberrechtlich schützbar? 2 HermanZ 1813 01. Feb 2011, 11:59
HermanZ CSS urheberrechtlich schützbar?
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2444 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge MS Expression Web Forum: Formatieren ohne CSS 5 schreibi 3887 01. Apr 2010, 09:49
Gast Formatieren ohne CSS
Keine neuen Beiträge HTML Editoren Forum: MouseOver -> Sound & Zoom 2 Besucher21 3459 17. März 2010, 14:01
MikeMcFly MouseOver -> Sound & Zoom
Keine neuen Beiträge HTML & CSS Forum: 1und1 CSS und HTML daten hochladen 1 jan r. 4691 04. März 2010, 11:04
alexander912 1und1 CSS und HTML daten hochladen
Keine neuen Beiträge MS Expression Web Forum: css Validität 10 sashnow 1638 18. Apr 2009, 17:58
sashnow css Validität
Keine neuen Beiträge Frontpage Forum: Mit style.css oder ohne? 8 fcb-chris 1220 28. Mai 2008, 20:22
womaninweb Mit style.css oder ohne?
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Excel Tricks