Ir para conteúdo

POWERED BY:

Arquivado

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

DuuuuDuuuu

[Resolvido] Troca de enredeço na tag img

Por , em Javascript

Recommended Posts

DuuuuDuuuu    1

DuuuuDuuuu
Postado

ele faz a comparação sem problema no if, sinal que a está indo certo, e o problema está na troca do 'src', no firefox ele não mostra, e no ie6 ele da erro, pede se da quer continuar a executar o script

segue o codigo:

 

javascript

 

function changeImg(foto) {
   if(document.full.src != foto){
       document.full.src = foto;
}
}

 

html:

 

   <div id="full"><img name="full" src='img/Rubens 001.jpg' alt="" height="300" width="500"/></div>
   <div class="mini">
<a href="#" target="_self" title="" onclick="changeImg('img/Rubens 001.jpg')"><img src="thumbnails/Rubens 001.jpg" /></a>
<a href="#" target="_self" title="" onclick="changeImg('img/Rubens 002.jpg')"><img src="thumbnails/Rubens 002.jpg" /></a>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tente assim:

 

    <div><img name="full"  id="full" src='img/Rubens 001.jpg' alt="" height="300" width="500"/></div>

e então:

 document.getElementById('full').src = foto;

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mostre como ficou o seu script completo.

 

 

para te ajudar, acesse o console de erros do navegador

 

Ctrl+Shift+J no Firefox

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post

Link para o post
Compartilhar em outros sites

DuuuuDuuuu    1

DuuuuDuuuu
Postado

vi que o meu firefox tava dando um alert ai:

 

if(document.getElementById('img-full').src != foto){

 

não sabia dessa forma de debugar no firefox, muito boa, eu estou ussando o firefox 3.2, pode ser que era esse probleminha, pois testei em outra máquina do jeito que estava, e tava ok, só que no ie6 ele fica dando esse erro, tem como resolver no ie6 será? no 7 tambem não da.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vi que o meu firefox tava dando um alert ai:

e qual é a mensagem que ele mostra junto com esse alert?

 

leu o artigo que postei ? consta lá ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

DuuuuDuuuu    1

DuuuuDuuuu
Postado

Resolvido, ele dissia que a id não tinha sido especificada, era por causa do hiffen, vi depois que no editor de codigo ele ficava em azul, dai coloquei um underline, pra recompensar a ajuda vou postar o codigo, muito simples de um album de fotos.

 

Segue abaixo:

 

<!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>Album de Fotos</title>
<script type="text/javascript">
function changeImg(foto, id, time) {
if(document.full.src != foto){	
target = document.getElementById(id);
alpha = 0;
timer = (time*1000)/50;
var i = setInterval(
		function() {
			if (alpha >= 100)
				clearInterval(i);
			setAlpha(target, alpha);
			alpha += 2;
		}, timer);
			document.full.src=foto;
}
}

function setAlpha(target, alpha) {
target.style.filter = "alpha(opacity="+ alpha +")";
target.style.opacity = alpha/100;
}
</script>
<style>
#body div.mini a img {
margin:5px 0 0 0;
padding:5px;
width: 133px;
height: 100px;
border:1px solid #dedede;
text-decoration:none;

opacity: 0.70;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
#body div.mini a:hover img{
border:1px solid #8e8e8e;
background: #0099FF;

opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
</style>
</head>

<body><center>
<h1>Album de Fotos</h1>
<div id="body">
   <div id="full"><img name="full" src='img/Rubens 001.jpg' alt="" height="265" width="440"/></div>
   <div class="mini">
<a href="javascript:changeImg('img/Rubens 001.jpg', 'full', 0.1)" target="_self" title=""><img src="thumbnails/Rubens 001.jpg" /></a>
<a href="javascript:changeImg('img/Rubens 010.jpg', 'full', 0.1)" target="_self" title=""><img src="thumbnails/Rubens 002.jpg" /></a>
<a href="javascript:changeImg('img/Rubens 011.jpg', 'full', 0.1)" target="_self" title=""><img src="thumbnails/Rubens 003.jpg" /></a>
</div>
</div>
</center>
</body>
</html>

 

o efeito fade funciona de forma diferente em alguns navegadores e só funciona no ie8, mas a funcionalidade basica dele que é trocar a imagem, e mudar a opacidade da imagem no hover, está funcionando perfeitamente no firefox, opera, chrome, e ie6 pra cima

 

vlww galera

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Você quer trocar o endereço de imagem na tag IMG? Se for, você pode usar jQuery, usando find e each pra percorrer todas as imagens, e usa o attr pra pegar o valor do src, pegando este valor, usa uma função o jQuery que substitui este valor.

 

Se for isso, então essa é a minha lógica.

Compartilhar este post

Link para o post
Compartilhar em outros sites

DuuuuDuuuu    1

DuuuuDuuuu
Postado

tambem pensei em usar algo assim, mas não queria puxar nenhum jquery na pagina, queria mesmo é montar algo bem pratico, até pq nem vale a pena chamar o jquery pra fazer algo que em duas ou tres linha de javascript já resolve, se tivesse mais coisas pra usar o jquery na pagina, ai vale a pena, carregar um arquivo a mais pra fazer uma função que pode ser simplificada em algumas linhas, fica inviável nessa situação, e não se voce viu o inicio do post, a idéia era achar uma solução para o codigo inicial e não criar algo do zero, então é totalmente inviável

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Entendi amigo. Só tentei ajudar!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito