Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Como Tocar sons ao Passar/Clicar o mouse?

John Jefferson

Perguntado por John Jefferson,

 Share

Pergunta

John Jefferson

John Jefferson

Postado
Postado

Olá,

Dúvida :

Como Tocar sons ao Passar o mouse? De modo que seja numa classe css?

Eu gostaria que ao Passar o mouse nessas Classes:

ul.navlinks, input.button1, input.button2, a.button1, a.button2, button.button2, button.button1

Tocasse este som: http://discolocal.ueuo.com/sons/Hover.mp3

e ao clicar nessas classes acima,tocasse este: http://discolocal.ueuo.com/sons/Clicando.mp3

Tem Como?

Obrigado

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
Willian Gustavo Veiga

Willian Gustavo Veiga

Postado
Postado

Boa tarde, tudo bem?

Fiz um exemplo bem simples. Com certeza este código pode ser melhorado.

<!HTML>
<html>
    <head>
        <title>Sounds</title>
    </head>
    <body>
        <a href="#" class="button1" />Button 1 class</a>
        <a href="#" class="button2" />Button 2 class</a>
        &lt;script>
        var audio = null;
        var classes = ['button1', 'button2'];
        for(var i = 0; i < classes.length; i++) {
            var elements = document.getElementsByClassName(classes[i]);
            for(var j = 0; j < elements.length; j++) {
                elements[j].onclick = function(event) {
                    event.preventDefault();
                    audio = document.createElement('audio');
                    audio.src = 'hover.ogg';
                    audio.autoplay = true;
                    document.body.appendChild(audio);
                }
                elements[j].onmouseover = function(event) {
                    event.preventDefault();
                    audio = document.createElement('audio');
                    audio.src = 'clicando.ogg';
                    audio.autoplay = true;
                    document.body.appendChild(audio);
                }
            }
        }
        </script>
    </body>
</html>

Este exemplo foi testado APENAS no Firefox 3.5.12.

Um abraço, tudo de bom.

Link para o comentário
Compartilhar em outros sites
  • 0
John Jefferson

John Jefferson

Postado
  • Autor
Postado

iXI Cara não pegou,eu testei no Firefox e IE ,e não pega.

O link da página: http://www.discolocal.net/home-h28.htm

O Código esta assim:

<!HTML>
<html>
    <head>
        <title>Sounds</title>
    </head>
    <body>
        <a href="#" class="button1" />Button 1 class</a>
        <a href="#" class="button2" />Button 2 class</a>
        &lt;script>
        var audio = null;
        var classes = ['button1', 'button2'];
        for(var i = 0; i < classes.length; i++) {
            var elements = document.getElementsByClassName(classes[i]);
            for(var j = 0; j < elements.length; j++) {
                elements[j].onclick = function(event) {
                    event.preventDefault();
                    audio = document.createElement('audio');
                    audio.src = 'http://discolocal.ueuo.com/sons/Hover.ogg';
                    audio.autoplay = true;
                    document.body.appendChild(audio);
                }
                elements[j].onmouseover = function(event) {
                    event.preventDefault();
                    audio = document.createElement('audio');
                    audio.src = 'http://discolocal.ueuo.com/sons/Clicando.ogg';
                    audio.autoplay = true;
                    document.body.appendChild(audio);
                }
            }
        }
        </script>
    </body>
</html>

O Que será que esta errado?

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...