Template Rule for JavaScript Rollovers

Just a Template that generates Crossbrowser JavaScript Rollover Buttons:

<xsl:template match="button"> 
<a>
 <xsl:attribute name="href">
 	<xsl:value-of select="@url"/>
 </xsl:attribute>
 <xsl:attribute name="onMouseOver">
 	document.images['cm<xsl:value-of select="@id"/>'].src='<xsl:value-of
select="@rollover"/>';
 </xsl:attribute>
 <xsl:attribute name="onMouseOut">
        document.images['cm<xsl:value-of
select="@id"/>'].src='<xsl:value-of select="@active"/>';
 </xsl:attribute>
 <img>
 	<xsl:attribute name="name">cm<xsl:value-of
select="@id"/></xsl:attribute>
        <xsl:attribute name="src"><xsl:value-of
select="@active"/></xsl:attribute>
        <xsl:attribute name="alt"></xsl:attribute>
        <xsl:attribute name="border">0</xsl:attribute>
 </img>
</a>              
</xsl:template>


use it with

<button id="1" active="some.gif" rollover="another.gif"
inactive="sleepy.gif"/>


You can build menus with a single highlighted Button easily by extending
the template rule above with an xsl:choose Element.

Regards,

Daniel Hinz


-- 
Daniel Hinz - XML Evangelist and Software Developer
Higher-Order AG
Burchardstrasse 19, D-20095 Hamburg, Germany
fon: 040 / 325587 - 0  fax: 040 / 325587 - 99
mailto:daniel.hinz@xxxxxxxxxxxxxxx http://www.higher-order.de


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list