Jump to content
asfaria

carregar a imagem no onclick

Recommended Posts

Galera me ajuda ai,. estou com mais um problema já e não o erro, onclick não carrega a imagem do pause


<html lang="pt-br">
 
<head>
     <meta charset="utf-8">
<title>Cantora Gospel</title>
<meta name="">
<meta name="decription" content="">
<link rel="stylesheet" href="css/estilo.css">
<script type="text/javascript" src="js/controls.js"></script> 
 
</head>
 
<body id="home">
   
 
<header>
<div id="wrapper">
 
<audio id="mytrack" controls>
 
        <source src="audio/som.mp3" type="audio/mp3"/>
 
</audio>
<nav>
    <div id="defaultBar">
   <div id="progressBar"></div>
</div>
<div id="buttons">
     <button type="button" id="playButton" onclick="playOrPause()"></button>
     <button type="button" id="muteButton"><button>
 <span id="currentTime">0:00</span> 
/ <span id="fullDuration">0:00</span>
     
</div>
</nav>
</div>
 
</header>
<script type="text/javascript" src="js/controls.js"></script> 
 
<div class="container">
 
        <nav id="menu">
    <ul id="nav">
   <li><a href="index.html" id="ho">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="perfil.html">Perfil</a></li>
<li><a href="fotos.html"class="active">Fotos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="discografia.html">Discografia</a></li>
</ul>
</nav>
 
 
 
 <section>Conteudo</section>
 <aside>Relacionado</aside>
 <footer>Roda Pé</footer>
</div>
 
</body>
</html>
 


CSS


#defaultBar{
width:640px;
position:relative;
background-color:#606060;
height:10px;
}
#progressBar{
position:absolute;
height:0px;
background-color:#3498db;
width:100px;
}
#playButton{
background-color:rgb(250,250,250);
border:none;
height:20px;
width:20px;
background-image: url(../imagens/play.png);
background-repeat:no-repeat;
background-position:center;
}
#muteButton{
background-color:rgb(250,250,250);
border:none;
height:20px;
width:20px;
background-image: url(../imagens/speak.png);
background-repeat:no-repeat;
background-position:center;
}
 
#muteButton:active,#playButton:active {
position:relative;
top:2px; 
}
 
 



JAva Script



var mytrack = document.getElementById('mytrack');
var playButton = document.getElementById('playButton');
 
function playOrPause(){
if(!mytrack.paused && !mytrack.ended){
mytrack.pause();
playButton.style.backgroundImage = 'url(../imagens/play.png)';
}
else{
mytrack.play();
playButton.style.backgroundImage = 'url(../imagens/pause.png)';
}
}  
 


O erro


Failed to load resource: net::ERR_FILE_NOT_FOUND

Edited by William Bruno
Adicionar code

Share this post


Link to post
Share on other sites

Essa imagem não existe no caminho indicado então.

Share this post


Link to post
Share on other sites

ja procurei erro neste codigo e não achei nada

tenho uma pasta para cada tipo de arquivo: imagens ; JS ; css e audio.

me diz uma coisa quem chama esta imagem? é o js né.

Share this post


Link to post
Share on other sites

Malditas URLS relativas haha sempre trollando a gente.

playButton.style.backgroundImage = 'url(../imagens/pause.png)';

Como tu não passou a barra (root) então ele vai usar o caminha apatir de onde está sendo executado.

RELATIVO / SUBIR UMA PASTA / ENTRAR NA PASTA 'imagens' / ABRIR ARQUIVO 'pause.png'

Fiquei em duvida se esse relativo vai a a partir de onde está o JS, ou do pagina.html que chamou o js.

Outra alternativa é chamar pelo Root:

playButton.style.backgroundImage = 'url(/meusistema/imagens/pause.png)';

Outra coisa que nunca sei se é obrigatorio ou não é o uso das aspas simples + duplas:

ex do w3c:

document.body.style.backgroundImage = "url('img_tree.png')";

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By mzaidan
      Prezados, existe alguma função que quando a pessoa entre em uma pagina um <button> seja clicado automaticamente???
       
      <div class="col px-0"> <button id="by-link" type="button" class="btn btn-info">Enviar</button> </div> Grato
    • By Richard.Ribeiro
      Boa tarde Pessoal e minha primeira vez aqui. e gostaria de uma ajuda.
      como posso salvar no banco o input adicionado pela função ONCLICK??
      Encontrei essa ajuda  aqui no fórum "(formulario[0][quantidade]) para que os inputs adicionados não fiquem com mesmo nome, porém ainda não conseguir salvar no banco, estou salvando apenas o principal.
      Resumindo, preciso salvar os pedidos de todos inputs e select adicionado pelo onlick.
       
       
        <div id="box" >
        <form id="teste"  method="post">
          <?php
            if(isset($_POST['acao'])){
              $tipo_material = $_POST['material'];
              $quantidade = $_POST['quantidade'];

              // salvar no banco de dados!
                  $gravar = new Painel();
                  $gravar->cadastrarItem($tipo_material,$quantidade);
                  }
        ?>
        <div class="pedido">

          <label>Selecione Material:</label>
          <select name="formulario[0] [material]" id="material">  
      --AQUI MOSTRA OS DADOS RETORNADOS POR UM CONSULTA AO BANCO COM FOREACH--
             </select>
          <input type="text" id="quantidade" name="formulario[0][quantidade]" placeholder="Digite a Quantidade" >
          <input type="submit" name="acao" value="Cadastrar!">
          </form>
      </div><!--pedido-->
        </div><!--box-->
       
       
    • By tony_lu
      Ola pessoal, tenho um formulário e preciso que ao clicar no botão, eu envie parâmetros do que foi digitado nos campos input dentro da url função do onclick:
      <form action="whatsapp.php" id="send-whatsapp" target="_blank" method="get">              <input name="login" type="hidden" value="logindousuario">             <input name="numero" type="hidden" value="numero">             <input type="text" name="nome"  placeholder="Nome">              <input type="text" name="telefone" class="telephoneMask"  placeholder="(00) 0000-0000">              <input type="submit" value="" class="enviar" onclick="return gtag_report_conversion('https://site.com.br/whatsapp.php?login=valordoinput&numero=valordoinput&nome=valordoinput&telefone=valordoinput')">              </form> Podem me ajudar?
      Obrigado!
    • By empirerock
      Bom dia.
      Estou usando datatable em server processing, e uma das colunas não funciona o window.open, ele simplesmente carrega na mesma página, não abre em nova janela.
      Alguém poderia me ajudar?
       
      Justamente a linha    $('td:eq(6)', nRow).html(......      não funciona.
       
      "fnRowCallback": function( nRow, aData, iDisplayIndex ) { $('td:eq(1)', nRow).html('<a href="pdf/componente/'+aData[5]+ '" onclick="window.open(\'pdf/componente/'+aData[1]+'\', \'newwindow4\', \'width=900, height=570\', \'left=30, top=10\', \'scrollbars=1\'); return false;">'+aData[1]+'</a>'); $('td:eq(0)', nRow).html('<a href="pdf/cabo/'+aData[6]+ '" onclick="window.open(\'pdf/cabo/'+aData[0]+'\', \'newwindow4\', \'width=900, height=570\', \'left=30, top=10\', \'scrollbars=1\'); return false;">'+aData[0]+'</a>'); $('td:eq(5)', nRow).html('<a href="pdf/fotos/'+aData[7]+ '" onclick="window.open(\'pdf/fotos/'+aData[7]+'\', \'newwindow4\', \'width=900, height=570\', \'left=30, top=10\', \'scrollbars=1\'); return false;">'+aData[7]+'</a>'); $('td:eq(6)', nRow).html('<a href="pdf/fotos/'+aData[8]+ '" onclick="window.open(\'pdf/fotos/'+aData[8]+'\', \'newwindow4\', \'width=900, height=570\', \'left=30, top=10\', \'scrollbars=1\'); return false;">'+aData[8]+'</a>'); return nRow; },  
    • By paikoala
      Bom dia galera, tenho no meu site um menu feito com <li> e precisava que um deles abrisse em uma nova aba
      <li onclick="parent.location='<?php echo base_url(''); ?>''">SITE</li> procurei um monte na internet pra tentar achar e vi o pessoal falando pra colocar o targed _blank mas tentei de tudo quanto é forma e não consigo fazer funcionar, ou ele gera um erro no codigo e zoa o menu ou ele continua abrindo a devida pagina na mesma aba.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.