Wie kann ich über einen :hover mit Html5 css und javascript einen ton abspielen?

Hallo Leute, ich bastel seit kurzem an einer kleinen Homepage und möchte bei der auslösung eines hovers (sobald der zeiger auf ein bestimmtest element zeigt) ein ton abspielen lassen.. Ich suche bereits seit 2 tagen nach einer lösung, jedoch vergeblich... ich habe sehr gute erklärungen gefunden jedoch kommt bei mir eine fehler meldung sobald ich folgendes eingebe: und zwar wird das source rot unterstrichen... ich weiß jedoch nicht wieso und bei allem lösungen die ich gefunden habe finde ich fast immer die gleiche lösung... ich arbeite mit dem editor NetBeans... die seite besteht der zeit aus Html5 und css... javascript wird auch kommen sobald ich eine lösung für das problem gefunden habe...

vllt findet sich jemand der sich gut auskennt und mir evtl. ein guten beispiel für die lösung zeigen kann ....

danke schon mal :)

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

rmnstr

05.11.2015, 00:35

Mit dem HTML5 audio Tag und mouse events.

<audio id="mysound" controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>
<button onmouseover="document.getElementById('mysound').play()"
        onmouseout="document.getElementById('mysound').pause()">
Hover me!
</button>

swobocop

Fragesteller

05.11.2015, 13:31

super sache genau so in etwa habe ich es mir vorgestellt... das einziege was noch nicht so richtig funktioniert ist wenn ich mit dem mauszeiger aus der div raus gehe, dann läuft der sound weiter und hört nicht auf... bei einem erneuten reinfahren wird der sound auch nicht von neu gestartet sonder läuft durch bis er fertig ist... vllt hast du da auch noch eine lösung dafür ?:)

ich habe den audio tag über die div gepackt und die onmouseover und onmouseout nun in den div tag gepackt..ich möchte auch mein html code hier einfügen aber irgendwie funktionierts nicht ..-.-

liebe grüße

swobocop

Fragesteller

05.11.2015, 13:34

und vllt weißt du auch wie ich die player leiste wegbekomme? :)

rmnstr

05.11.2015, 18:33

@swobocop

Das Audio-Element kannst du ausblenden, indem du controls einfach entfernst.

Ganz stoppen kannst du das Audiofile mit Hilfe der currentTime property vom audio Element.

<div id="mysound"
     onmouseover="document.getElementById('mysound').play()"
     onmouseout="stop()">
Hover me!
</div>

<script>
function stop() {
  var audio = document.getElementById('mysound');
  audio.pause();
  audio.currentTime = 0;
}
</script>

swobocop

Fragesteller

06.11.2015, 13:39

@rmnstr

super vielen dank... genau so habe ich es mir vorgestellt und nach genau so einer lösung habe ich gesucht :) kennst du dich persönlich so gut aus oder kannst du mir vllt eine gute quelle empfehlen?

evtl. könnten wir irgendwie in kontakt bleiben falls ich noch paar fragen hätte? :)

liebe grüße

rmnstr

07.11.2015, 17:46

@swobocop

Du solltest dich bei so etwas immer über die Eigenschaften eines HTML-Elements informieren.
http://www.w3schools.com/ bietet dafür eine ganz gute Übersicht.

Über JavaScript kannst du jede dieser Eigenschaften manipulieren, das läuft alles eigentlich immer gleich ab.

Ansonsten solltest du bei solchen Fragen immer zuerst auf Stackoverflow suchen. Die Chancen stehen ziemlich gut, dass dort jemand schon dasselbe gefragt hat. Du musst halt nur auf Englisch suchen ;)

caigie

04.11.2015, 01:28

wird mit :hover wahrscheinlich nicht machbar sein, da css eigentlich nicht viel mit audiodateien anstellen kann.

Du solltest dafür javascript verwenden, einen EventListener für ein mouseover auf dein Element setzen und dann darin ein auf der seite eingebautes audioelemnt abspielen

swobocop

Fragesteller

04.11.2015, 13:14

könntest du mir evtl. eine kleine vorlage schreiben wie das alles aussieht? auch in javascript?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

Hilfe beim Programmieren?

Hallo,

Ich bin Anfänger beim Programmieren mit Javascript css und html

Ich möchte gerade mit dem :hover Effekt einen Buchstaben vergrößern. Wenn sie dieser Buchstaben aber vergrößert verschiebt er die anderen Buchstaben. Was muss ich machen damit das nicht passiert?

...zur Frage

Webdesign, Website-Entwicklung... HTML5, CSS, JAVA, JAVASCRIPT... womit soll ich beginnen? Tipps, anregungnen, Reihenfolge? Tools, Werkzeuge...?

Hey,

Ich möchte nebenbei etwas über Website-Entwicklung, Webdesign, App-Entwicklung lernen und bitte euch mir Tipps zur Lern-Reihenfolge, Ratschläge, Pflichtlektüren, Anregungen, Basics, etc. zu geben.

Vielen Dank schon-mal!

...zur Frage

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Browserweiche per PHP für HTML5-Abfrage?

Hallo, ich möchte beim Re-Design einer meiner Webseiten auf HTML5 umstellen. Da es jedoch noch immer genügend Nutzer gibt, deren Browser nicht oder nur teilweise für HTML5 und CSS3 unterstützen, möchte ich über eine Browserweiche einbauen, die bei Bedarf auf ein zusätzliches XHTML-Template zurückgreift.

Conditional Comments sind mir dafür zu ungenau. Gibt es bereits mit PHP Lösungen, den Browser genau abzufragen? Oder gar den Browser auf seine HTML5- und CSS3-Fähigkeiten zu testen? JavaScript - sollte es da was geben - wäre natürlich auch kein Problem.

...zur Frage

css Animation erst abspielen wenn im Sichtfeld?

Wie kann man eine Snimation mit css erst abspielen lassen, wenn diese in den viewport (sichtfeld) kommt, und nicht direkt, wenn die Seite geladen wird?

und das ganze ohne Javascript oder externe programme...

...zur Frage

HTML/Javascript Wert speichern ohne Server?

Sagen wir mal meine Aufgabe ist es eine Webseite zu erstellen mit einem Counter, drückt man drauf zählt er hoch. 0->1->2->3>-4>-5->...

Der Wert soll aber gespeichert werden, wenn die nächste Person diese Seite aufruft, soll der Counter nicht wieder bei 0 anfangen, sondern da wo die anderen Personen aufgehört haben.

Das Problem: ich darf NUR HTML, CSS und Javascript benutzen.

Geht das überhaupt ohne PHP, Datenbank oder ähnlichem?

Ich hab gelesen es gibt Local Storage von HTML5 und es gibt Cookies, aber die sind nur für den Benutzer lokal und bringt mir nichts, soweit ich das verstanden habe.

Könnte ich irgendwie die Werte in einer Text Datei speichern und die Text Datei mit HTML oder Javascript wieder auslesen?

...zur Frage

CSS keyframe Animation über JS mehrmals abspielen lassen?

Hallo, Wie ihr es schon aus der Frage entnehmen könnt, versuche ich eine Keyframe animation via JavaScript zu aktivieren. Jedoch habe ich das problem, dass sich diese animation nur einmal abspielen lässt. Könnt ihr mir bitte sagen woran das liegen könnte und mir dabei helfen den code zu vervollständigen? Hier der Code:

<head>
    <title>Beispiel</title>
    <style>
        #y {
            height: 50px;
            position: relative;
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        #y:active{
            animation: showEffect 0.5s;
        }
    @keyframes showEffect {
        0% {
            content: 'ICH';
            top: 20;
            color: rgba(100, 100, 100, 0);
        }
        20% {
            top: 10;
            color: rgba(100, 100, 100, 1);
        }
        100% {
            top: 0;
            color: rgba(100, 100, 100, 0);
        }
    }
    </style>
</head>
<body>
    <div id="container" align="center">
        <div id="y"></div>
        <br>
        <br>
        <input type="button" value="On" onclick="showEffect()">

        <script>
            function showEffect() {
                var on = 1;
                if (on == 1) {
                    document.getElementById('y').innerHTML = "A";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 0;
                } else {
                    document.getElementById('y').innerHTML = "B";
                    document.getElementById('y').style.animation = "showEffect 0.5s";
                    on = 1;
                }
            }
        </script>
    </div>
</body>

...zur Frage

CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

jQuery('#hoverdiv').hoverdiv(

function() {$('#Kindelement').show();},

function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

background-color: red;

z-index: 1;

}

.Kindelement

{

position: absolute;

top:0;

background-color: blue;

-moz-transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

opacity: 0;

z-index: 2;

}

.hoverdiv

{

position: relative;

}

.hoverdiv:hover + .Kindelement

{

opacity: 1;

}

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey;

color: white;

border-radius: 50px !important;

font-family: "Helvetica Neue",

Arial, sans-serif !important;

float: none !important;" ;>

<div id="Kindelement"

style="color: white;

background: grey;

position: absolute;

top: 770px !important;

opacity: 0;">

</div>

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

...zur Frage

Gute Webseiten oder PDF Docs, um PHP, Javascript, CSS und HTML zu lernen?

Video Tutorials beanspruchen viel Zeit. Deshalb bräuchte ich Webseiten oder PDF Docs für die oben genannten Programmier- und Skriptsprachen. Wichtig wäre, dass sie marktorientiert sind, also genau die Dinge zeigen, die man im realen IT Markt anwendet.

...zur Frage

Forum nur mit HTML und CSS?

Ist es möglich ein Forum zu erstellen ohne PHP und JavaScript?

Da ich momentan weiterhin nur mit HTML und CSS arbeite, wäre es super, falls es da eine Lösung gibt. Ich will erst mit HTML und CSS sicher sein, bevor ich PHP und JavaScript lerne.

...zur Frage

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zur Frage

Wie kann ich ein CodePen (HTML, CSS und JavaScript) auf einer Seite einbetten?

Hallo,

ich habe dieses Widget für HTML auf CodePen gefunden:

https://codepen.io/eehayman/pen/jVPKpN

Nun möchte ich das auf einer Seite einbetten. Könnte mir da jemand helfen?

...zur Frage

Gehen CSS-Animationen auch rückwärts nach Hover?

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen