Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola,
tenho duas imagens img1 e outra img2, ta aparecendo a img1, ao clicar a 1º vez aparece a imagem img2, qd clica novamente aparece a img1 e assim por diante, a cada clique altera a imagem.
desde já obrigada
Ola iRCC, não funcionou, você tem algum outro modo de fazer ou teria como você me passar o código completo, pois o meu nao ta fazendo a 2º troca.
muito obrigada
tentou debugar esse JS já? posta o codigo que você fez aqui pra gente da uma olhada
Implementei de uma forma um pouco diferente agora, espero que de certo
tag img
<img id="status" src="imagens/nuvem.gif onclick="trocaimagem(this)" />
funcção js
function trocaimagem(img) {
var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);
if (src == 'nuvem1.gif') {
img.src = 'imagens/nuvem2.gif'; // tenho que passa o img pq a referencia da imagem
} else if (src == 'nuvem2.gif') {
img.src = 'imagens/nuvem3.gif';
ajaxRequest("ajax.asp?img=1&origem=trocaImagem&status=3&codigo=" + codigo, vazio)
} else if (src == 'nuvem3.gif') {
img.src = 'imagens/nuvem1.gif';
}
}tentou debugar esse JS já? posta o codigo que você fez aqui pra gente da uma olhada
Oi, eu sou nova fazendo script, entao primeiramente desculpe minha ignorancia. Mas como eu posso debugar o js?
você pelo menos tentou implementar como eu fiz na segunda vez? Esse script ali eu uso no meu sistema, e la funciona perfeitamente.
você usa o que para programar? VisualStudio?
tentou debugar esse JS já? posta o codigo que você fez aqui pra gente da uma olhada
Oi, eu fiz desse jeito, assim não funciona, mas se eu comentar a linha ( var src = elImg.substr....) e no if substituir o src e pelo elImg, ele só altera a imagem uma vez.
você sabe o que pode ser?
Obrigada.
<html>
<head>
</head>
<body>
<img OnClick="trocar(this)" src="azul.gif" id="imagem">
<script type = "text/javascript">
function trocar(elImg) var elImg = document.getElementById('imagem');
//pegar o atual src
var src = elImg.substr( elImg.lastIndexOf('/')+1 , elImg.length);
if( src == 'amarelo.gif' ) elImg.src = 'amarelo.gif';
}
}
</script>
</body>
</html>>
você pelo menos tentou implementar como eu fiz na segunda vez? Esse script ali eu uso no meu sistema, e la funciona perfeitamente.
você usa o que para programar? VisualStudio?
Utilizo o eclipse
Olha só, talvez seja isto que estou pensando aqui:
Nesta linha
var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);
ele faz o seguinte: Pega o src completo da tua imagem e faz uma string começando da barra ('/'), como no seu caso o seu src é somente src="amarelo.gif" não existe barra, entendeu? e ai o js vai se perder pq nao existe uma barra no teu src, no seu caso nao precisaria do codigo acima somente armazene o src em uma variavel e veja o que acontece, ok?
Não sei se você consegui entender.
Bom Vanessa vou postar aqui um script que acabei de fazer:
Parte HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="script/teste.js"></script>
<title>Troca imagem</title>
</head>
<body>
<form name="form1" action="#" method="post">
<table>
<tr>
<td>
<img src="imagens/aguardando.gif" id="imagem" onclick="alteraImagem(this)" />
</td>
</tr>
</table>
</form>
</body>
</html>Parte javascript
function alteraImagem(img) {
// debugger
var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);
if (src == 'aguardando.gif') {
img.src = 'imagens/iniciada.gif'; // tenho que passa o img pq a referencia da imagem
} else {
img.src = 'imagens/aguardando.gif';
}
}>
Bom Vanessa vou postar aqui um script que acabei de fazer:
Parte HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="script/teste.js"></script>
<title>Troca imagem</title>
</head>
<body>
<form name="form1" action="#" method="post">
<table>
<tr>
<td>
<img src="imagens/aguardando.gif" id="imagem" onclick="alteraImagem(this)" />
</td>
</tr>
</table>
</form>
</body>
</html>Parte javascript
function alteraImagem(img) {
// debugger
var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);
if (src == 'aguardando.gif') {
img.src = 'imagens/iniciada.gif'; // tenho que passa o img pq a referencia da imagem
} else {
img.src = 'imagens/aguardando.gif';
}
}vlw mesmo.
>
>
Bom Vanessa vou postar aqui um script que acabei de fazer:
Parte HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="script/teste.js"></script>
<title>Troca imagem</title>
</head>
<body>
<form name="form1" action="#" method="post">
<table>
<tr>
<td>
<img src="imagens/aguardando.gif" id="imagem" onclick="alteraImagem(this)" />
</td>
</tr>
</table>
</form>
</body>
</html>Parte javascript
function alteraImagem(img) {
// debugger
var src = img.src.substr(img.src.lastIndexOf('/') + 1, img.src.length);
if (src == 'aguardando.gif') {
img.src = 'imagens/iniciada.gif'; // tenho que passa o img pq a referencia da imagem
} else {
img.src = 'imagens/aguardando.gif';
}
}vlw mesmo.
Bom Aproveitando esse post, gostaria de saber como eu faço pra usar mais de 2 figuras digamos por 3 ou 4 e voltar para figura 1 no caso aguardando.gif
obrigado
você tem que ter o src da imagem, depois extrair somente o nome dela e depois substituir pelo próxima.
//pegar o atual src
{
elImg.src = 'nuvemChuva.gif'
}
else
{
e na sua imagem no onclik você faria assim:
<img src="imagens/nuvem.gif" onClick="trocaimagem(this)" //coloco o this ali como parametro pq ele vai passar o src da imagem para a função