Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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)';
}mytrack.play();
playButton.style.backgroundImage = 'url(../imagens/pause.png)';
}
}O erro
Failed to load resource: net::ERR_FILE_NOT_FOUND
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é.
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')";
Essa imagem não existe no caminho indicado então.