Preciso De Uma Ajuda

[doulo4ever]

Pessoal, no código abaixo:

<script LANGUAGE="JavaScript" TYPE="text/javascript">

function amplia(url){
document.ampliada.src = url;
return false;
}

</SCRIPT>

<center>

<IMG NAME="ampliada" WIDTH=400 HEIGHT=300 SRC="prof01.jpg"><br><br>

<A HREF="prof01.jpg" onClick="return(amplia('prof01.jpg'))">
<IMG SRC="prof01.jpg" BORDER=0 WIDTH=100 HEIGHT=75></A>&nbsp;&nbsp;
<A HREF="prof02.jpg" onClick="return(amplia('prof02.jpg'))">
<IMG SRC="prof01.jpg" BORDER=0 WIDTH=100 HEIGHT=75></A>

</center>

Alguém pode me ajudar para que quando clicar nos "thumbs" para ampliar, a imagem grande altere com algum efeito de transição!? Achei um código na net de slideshow, achei alguns comandos nele, mas não to manjando aclopar ele!

if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

Se alguém que manja mais puder ajudar, agradeço!

Falou

[Crystian]

http://www.w3schools.com/dhtml/tryit.asp?f...ml_filter_image

dá uma olhada nesse link e vê se te ajuda.... agora é só você inventar algo com o opacity via js q fica show...

[doulo4ever]

Olá Crystian,

comecei a tentar fazer com opacity, até agora cheguei aqui:

<script LANGUAGE="JavaScript" TYPE="text/javascript">

function amplia(){
if(window.intervalo){
clearInterval(intervalo)
}
intervalo=setInterval("amplia2()",10)
}

function amplia2(){
if(document.getElementById('ampliada').filters.alpha.opacity>0){
document.getElementById('ampliada').filters.alpha.opacity-=5
}
}

</SCRIPT>

<center>

<IMG name="ampliada" id="ampliada" style="filter:alpha(opacity=100);" WIDTH=400 HEIGHT=300 SRC="01.jpg"><br><br>

<IMG SRC="01.jpg" onClick="amplia('01.jpg')" BORDER=0 WIDTH=100 HEIGHT=75></A>&nbsp;&nbsp;
<IMG SRC="02.jpg" onClick="amplia('02.jpg')" BORDER=0 WIDTH=100 HEIGHT=75></A>

</center>

Ao clicar no thumb, a imagem maior vai diminuindo a opacidade até 0!

Os passos que eu estava pensando em fazer eram os seguintes:

Apagar a primeira imagem ..... Trocar de imagem .... Aparecer a outra imagem

Mas o efeito que eu queria era que ao passo que a primeira imagem for desaparecendo, a segunda já vai aparecendo no mesmo lugar, assim como o efeito do slideshow que postei, creio que seja impossível com o opacity.

Mas agradeço pela força!

T++

[Crystian]

impossível não seria, pois você poderia colocar duas imagens sendo q uma dela estivesse em cima da outra (pra fazer isso coloque position absolute) e e as duas trabalhariam inversamente proporcional, quando uma estivesse com o opacity0 a outra estaria 100.... Dá pra fazer um esquema assim... o q acha?

[doulo4ever]

Saquei o que você tá falando!

Dei uma implementada, ficou assim:

<script LANGUAGE="JavaScript" TYPE="text/javascript">

function amplia(url){
document.imagem2.src = url;
if(window.intervalo){
clearInterval(intervalo)
}
intervalo=setInterval("amplia2()",10)
}

function amplia2(){
if(document.getElementById('ampliada').filters.alpha.opacity>0){
document.getElementById('ampliada').filters.alpha.opacity-=5
}

if(document.getElementById('ampliada').filters.alpha.opacity<100){
document.getElementById('ampliada2').filters.alpha.opacity+=5
}
}

</SCRIPT>

<center>

<div name="ampliada" id="ampliada" style="position:absolute;top:0;left:0;filter:alpha(opacity=100);">
<img name="imagem" width=400 height=300 src="01.jpg"></div>
<div name="ampliada2" id="ampliada2" style="position:absolute;top:0;left:0;filter:alpha(opacity=0);">
<img name="imagem2" width=400 height=300 src="02.jpg"></div>

<br><br><br><br><br><br><br><br><br><br>

<IMG SRC="01.jpg" onClick="amplia('01.jpg')" BORDER=0 WIDTH=100 HEIGHT=75></A>&nbsp;&nbsp;
<IMG SRC="02.jpg" onClick="amplia('02.jpg')" BORDER=0 WIDTH=100 HEIGHT=75></A>

</center>

O duro é que só funciona na primeira vez! Tem algumas linha que teriam que modificar a cada clique para dar certo:

document.imagem2.src = url;

Esta linha por exemplo, no primeiro clique, podia ser "imagem2" mesmo, mas no segundo clique teria que ser "imagem"! Como posso fazer um controle desse tipo?

Valeuu

T+