Hi,
I'm learning know about javascript and i have a work to do and i really need help.

i've got two list of image:

<!-- Lista das imagens pequenas -->
<ul class="pequenas">
<li><a href=""><img src="/home/yyy/imagens/img01_p.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onclick="ativa()" /></a>
<li><a href=""><img src="/home/yyy/imagens/img02_p.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onclick="ativa()" ></a>
<li><a href=""><img src="/home/yyy/imagens/img03_p.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onclick="ativa()"; /></a>
<li><a href=""><img src="/home/yyy/imagens/img04_p.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onclick="ativa()" /></a>
</ul>

<!-- Lista das imagens grandes -->
<ul class="grandes">
<li><img id="img1" src="/home/yyy/imagens/img01.jpg"/>
<li><img id="img2" src="/home/yyy/imagens/img02.jpg"/>
<li><img id="img3" src="/home/yyyfaela/imagens/img03.jpg"/>
<li><img id="img4" src="/home/yyy/imagens/img04.jpg"/>
</ul>

what i have to do is do a function that i called ativa() that when i click on the first img of the first list( class="pequenas") , the second list ( class="grandes") only shows the first image. When i click on the second img of "pequenas", only the second img of "grandes is showed and so on.
btw all the imagens of pequenas are always visible on the page.
thank you very much