Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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é.

Compartilhar este post


Link para o post
Compartilhar em outros 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')";

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por lezão
      Boa tarde, pessoal!
      Td bem com vcs?
       
      Estou a procura de um JS que me de retorno dos dados selecionados na pagina anterior.
      Eu escolho as minhas opções e qnd eu clicar em confirmar pedido chama outra pagina com os dados q eu selecionei mais os valor total
       
      Veja o código q estou utilizando:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <style type="text/css"> #iconApiWhatsapp{ position: fixed; display: flex; right: 0px; bottom: 0px; z-index: 99999; right: 0px; position: fixed; width: 100%; bottom: 0px; background: rgba(0,0,0,0.8); height: 57px; text-align: center; } #iconApiWhatsapp img{ display: flex; align-items: center; justify-content: center; font-size: 24px; width: 150px; height: 57px; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */ transition: opacity 0.5s; } #iconApiWhatsapp img:hover{ opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="92%" align="left"><b>PORTUGUESA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td width="8%" align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"> </td> </tr> <tr> <td align="left"><b>A MODA DA CASA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"></td> </tr> </table> <br/><br/><br/> <div id="iconApiWhatsapp" class="preco"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" align="lef" onclick="location.href='finalizar_pedido.html'" style="cursor:pointer;"> <font size="5" color="yellow" face="aril tahoma verdana"> Confirmar Pedido</td> <td width="70%" align="center"> <font size="4" color="white" face="arial"><b><span id="resultado"></span></b> <!--Resultado da soma dos checkbox--> <!--Resultado Pegando a Variavel - Resultado checkbox --> </font> </td> <td width="15%" align="right"><a href="javascript:window.history.go(-1)"><<Voltar</a></td> </tr> </table> </div> <script type="text/javascript"> var total = 0; //Chama a função com click em qualquer checkbox $(":checkbox").click(function () { //Atribui o valor do input p/ variável 'valor' var valor = parseInt($(this).val()); //Se o checkbox for marcado ele soma se não subtrai if ($(this).is(":checked")) { total += valor; } else { total -= valor; } //Atribui o valor ao input $("#evento_value").val(total); $("#resultado").text(formatPrice(total)); }); function formatPrice(value, currency = true) { var valor = parseFloat(value); let valorFormatado = null; if(currency) { //Valor com cifrão valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); } else { //Valor sem cifrão valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2}); } return valorFormatado; } </script> </body> </html>  
       
       
    • Por DOSDISDO
      Estou tentando alterar o evento onclick de butões gerados através do JavaScript. Por que meu código não funciona?   <p id='ai'>Click the button to make a BUTTON element with text.</p>
      <button onclick="generator()">Try it</button>
      <script>
      function generator() {
        for(var x=0; x<26; x++){
        var btn = document.createElement("BUTTON");
          btn.innerHTML=x;
          btn.onclick=function() {myFunction()};
        document.getElementById('ai').innerHTML+=btn.outerHTML;
        }
      }
      myFunction(){alert('bolas')};
    • Por Alberto Nascimento
      i("calcula").onclick = function(){ Este comando depois que eu atualizei meu servidor para PHP 7.2 não quer mais funcionar.
    • Por mamotinho
      Olá, boa noite! estou com bastante dificuldade em monta uma web com a versão do prototype e jquery.min pois eles são funções antigas e não estão compatíveis com as versões novas. gostaria de sabe se alguém conhece alguma forma nova de Utilizar onclick e ajax para abrir a página dentro da index sobre uma div ?
    • Por Airton Cruz
      Bom dia galera,
      Estou com uma situação que preciso resolver aqui na empresa. Tenho que abrir um popup a partir de botão, isso é facil, mas o botão faz parte de um formulário que precisa ser validado no momento do click do botão, ou seja, quando o usuário clicar no botão deve aparecer um POPup e validar o formulário de usuário e senha juntos.
       
      Segue o Codigo.
       
      -- criação da função do POPup
       
          <script language="javascript">
                          
                  function abrirPopup(url,w,h) {
                  var newW = w + 100;
                  var newH = h + 100;
                  var left = (screen.width-newW)/2;
                  var top = (screen.height-newH)/2;
                  var newwindow = window.open(url, 'name', 'width='+newW+',height='+newH+',left='+left+',top='+top);
                  newwindow.resizeTo(newW, newH);
                   
                  //posiciona o popup no centro da tela
                  newwindow.moveTo(left, top);
                  newwindow.focus();
                  return false;
                  }
          </script>
       
       <form name="formCliente" id="formCliente" action="http://www.google.com.br" method="post" class="clearfix" >
                          <input type="email" name="email" placeholder="E-mail:" value="" required="true"/>
                          <input type="password" name="senha" placeholder="Senha:" value="" required="true"/>
                         <button type="submit" class="bt-ok" onclick="return abrirPopup('popup2.html', 500, 270)">OK</button>
                          <div class="clear"></div>
                          <!--<div class="esqueci-minha-senha link-com-seta"><span></span><a href="/" title="Esqueci minha senha">esqueci minha senha</a></div>-->
                      </form>
       
       
      Por favor, preciso de ajuda urgente.
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.