• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

ricardocoimbra

Trocar a imagem e ao trocar imagem ela ter outro link

7 mensagens neste tópico

Bom eu não percebo quase nada de javascript e tirei este script para mudar de foto, só que queria quando mudar de foto ele ter determindao link ou seja:

<SCRIPT>
function muda_foto(i, b) {

document.images.foto.src = b.src;

var awidth=eval(b).width;
var aheight=eval(b).height;

if (awidth<250) {
document.images.foto.width = awidth;

}

}
</SCRIPT>

Agora aqui tenho foto grande:

echo "<img src=\"imagens/". $id_foto ."-1.jpg\" width=\"250\" border=\"0\" name=\"foto\">";

Depois tenho aqui duas imagens pequenas e quando clico nelas ela muda a foto grande de cima:

//imagem 1
<? if($imgs >= "1") {  echo"<A href=\"javascript:%20void(muda_foto(0,%20f_f0));\">
<IMG  src=\"imagens/thumbs/foto_". $id_foto ."-1.jpg\" width=\"88\" border=\"0\" name=\"mud_f0\"></A>"; ?>
<SCRIPT>f_f0=new Image; f_f0.src='/imagens/<? echo"$id_foto";?>-1.jpg';</SCRIPT>
<? } ?>

//imagem 2
<? if($imgs >= "2") {  echo"<A href=\"javascript:%20void(muda_foto(0,%20f_f1));\">
<IMG  src=\"imagens/thumbs/foto_". $id_foto ."-2.jpg\" width=\"88\" border=\"0\" name=\"mud_f0\"></A>"; ?>
<SCRIPT>f_f1=new Image; f_f1.src='/imagens/<? echo"$id_foto";?>-2.jpg';</SCRIPT>
<? } ?>

Ate aqui muito bem ele quando clico nas duas fotos pequenas ele substitui-me a grande em cima, agora a minha dificuldade é por um link diferente para a imagem grande que aparecer em cima.

Eu quando clico na imagem aparecia-me a imagem um em grande e essa ter determinado link. Quando clicasse na imagem 2 tivesse outro link diferente.

Se alguem me pudesse ajudar agradecia.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tens um <a> à volta da imagem, certo? Género

<a id="link_imagem" href="http://link.destino.com/"><img (...)></a>

Sendo o id desse elemento "link_imagem", podes usar o seguinte:

document.getElementById("link_imagem").href="http://novo.link.com/"

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É assim eu coloquei como tu disses-te document.getElementById("link_imagem").href="http://www.iol.pt/"; , só que acontece é que todas as fotos ficam com o ultimo link.imagem que eu defeni o que estarei a fazer mal?

O que eu tenho é isto:

<SCRIPT>
function muda_foto(i, b) {

document.images.foto.src = b.src;

var awidth=eval(b).width;
var aheight=eval(b).height;


if (awidth<250) {
document.images.foto.width = awidth;



}

}
</SCRIPT>

<table width="300" border="1" cellpadding="0" cellspacing="5">
 <tr>
 <!-- Foto Grande - Muda consuante o que escolher em baixo -->
   <td colspan="2"><div align="center">
<a id="link_imagem" href="http://www.sapo.pt">
<img src="images/planta_grand.jpg" width="300" height="200" border="0" name="foto" /></a>
</div></td>
 </tr>
 <tr>
 <!-- Foto Pequena Um -->
   <td width="138"><div align="center">
<A href="javascript:%20void(muda_foto(0,%20f_f0));"><img src="images/planta.jpg" width="100" height="75" name="mud_f0"  /></A>
<SCRIPT>f_f0=new Image;  f_f0.src='./images/planta_grand.jpg'; </SCRIPT>
</div></td>
<!-- Foto Pequena Dois -->
   <td width="160"><div align="center">
<A href="javascript:%20void(muda_foto(0,%20f_f1));"><img src="images/planta2.jpg" width="100" height="75" /></A>
<SCRIPT>f_f1=new Image;  f_f1.src='./images/planta2_grand.jpg'; document.getElementById("link_imagem").href="http://www.iol.pt/"; </SCRIPT></div></td>
 </tr>
</table>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não percebo o sistema de mensagens deste fórum...

Se puderes copiar para aqui a resposta que te dei, agradecia :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não percebo o sistema de mensagens deste fórum...

Se puderes copiar para aqui a resposta que te dei, agradecia :D

Tens que meter o getElementById dentro da função muda foto, e passar como parâmetro o novo link, algo assim:

function muda_foto(i, b, novolink) {

document.images.foto.src = b.src;
document.getElementById("link_imagem").href=novolink;

var awidth=eval(b).width;
var aheight=eval(b).height;


if (awidth<250) {
document.images.foto.width = awidth;
}

e alterar o elemento A das imagens pequenas assim:

<a href="javascript:muda_foto(0, f_f0, "http://www.sapo.pt"));"><img ...></a>

e

<A href="javascript:muda_foto(0, f_f1, "http://www.iol.pt"));"><img ...></a>

Da maneira que fizeste, o getElementById vai ser sempre executado quando carregas a página, e não quando clicas nas imagens.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado TheDark era mesmo isso, tinhas toda a razao... Da maneira como disses-te resultou.  ;)

A todos os votos de uma Boa pascoa!

Um abraço

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado! Só que meti ali umas aspas que têm que ser alteradas para plicas.

E Boa Páscoa para ti também! Cuidado com as amêndoas!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora