NOTE: Shown code are fragments of a whole working code! (Irrelevant closing tags are omitted like "</table>"./

I am new to XSLT and I am working on generating an image gallery(Intended gallery will be shown with a screenshot). Let me break this down so I don't overflow my post with code.

On a standard HTML page, you will have the following elements:

1.- JS code generated by Dreamweaver in <head> section.
2.- JS call on mouse event (onclick) which will trigger the swap action located inside the <a href> tag.
3.- JS call on mouse event (onclick) which will trigger a fade effect on the main picture located inside the <img> tag.

Image gallery works just fine...

Now, here it comes what it is causing me trouble.

On a XSLT page, I assume I can adapt the elements previously mentioned:

1.- JS code in <head> tag enclosed by CDATA as in <script.......> <![CDATA[ ..... ]]> </script> (I am assuming CDATA will render JS code as it is intended)
2.- JS call for the swap action and fade effect as shown:


<table width="400" border="1">
<tr>
<td colspan="8" align="center">
<xsl:apply-templates select="IMG/@main1"/>
<xsl:attribute name="id">
main
</xsl:attribute>
</td>

</tr>
<tr>
<td>
<a href="javascript:;">
<xsl:attribute name="onclick">
MM_swapImage('main','','<xsl:value-of select="IMG/@main1"/>',1)
</xsl:attribute>
<xsl:apply-templates select="IMG/@thumb1"/>
<xsl:attribute name="id">
t1
</xsl:attribute>
<xsl:attribute name="onclick">
MM_effectAppearFade('main', 1300, 0, 100, false)
</xsl:attribute>
</a>
</td>
<td>
<a href="javascript:;">
<xsl:attribute name="onclick">
MM_swapImage('main','','<xsl:value-of select="IMG/@main2"/>',1)
</xsl:attribute>
<xsl:apply-templates select="IMG/@thumb2"/>
<xsl:attribute name="id">
t2
</xsl:attribute>
<xsl:attribute name="onclick">
MM_effectAppearFade('main', 1300, 0, 100, false)
</xsl:attribute>
</a>
</td>



I am taking as a guide the following coding:

<table width="200" border="1">
<tr>
<td colspan="8"><img src="IMG/main1.jpg" name="main" width="116" height="116" id="main" /></td>
</tr>
<tr>
<td><a href="javascript:;" onclick="MM_swapImage('main','','IMG/main1.jpg',1)"><img src="IMG/thumb1.jpg" name="t1" width="50" height="50" border="0" id="t1" onclick="MM_effectAppearFade('main', 1300, 0, 100, false)" /></a></td>
<td><a href="javascript:;" onclick="MM_swapImage('main','','IMG/main2.jpg',1)"><img src="IMG/thumb2.jpg" alt="" name="t2" width="50" height="50" border="0" id="t1" onclick="MM_effectAppearFade('main', 1300, 0, 100, false)" /></a></td>


What I am trying to achieve:

http://img33.imageshack.us/img33/5557/src1a.jpg

Experts, I would really appreciate you to advice me how to tackle this issue down. How do I adapt this JS code into XSLT properly?

Thank you in advance!