Dropdown button
We have to make a few images like this:
Warning there are 4 pics, but last is very small. 🙂
Java script code:
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
<![CDATA[
<![CDATA[
var tag = function ( id )
{
return document.getElementById( id );
}
var run = function ( id )
{
var el = tag( ‘d’ + id );
var td = tag( ‘t’ + id );
if (el.style.display == ‘none’)
{
document.images[ ‘iu’ + id].src = "greyButton.gif";
document.images[ ‘iu’ + id].width = 15;
document.images[ ‘iu’ + id].height = 18;
td.style.backgroundImage = "url(vline.gif)";
td.style.backgroundRepeat = "repeat-y";
document.images[ ‘du’ + id].src = "hline.gif";
document.images[ ‘du’ + id].width = 30;
document.images[ ‘du’ + id].height = 6;
//document.images[ ‘du’ + id].align = "top";
}
else
{
td.style.backgroundImage = "";
document.images[ ‘iu’ + id].src = "hiddenButton.gif";
document.images[ ‘iu’ + id].width = 15;
document.images[ ‘iu’ + id].height = 18;
document.images[ ‘du’ + id].src = "blank.gif";
}
el.style.display = ( el.style.display == ‘none’ ) ? ‘block’ : ‘none’;
}
var preloadImages = function ()
{
for( var i = 0; i < arguments.length; i++ )
{
this[ i ] = new Image();
this[ i ].src = arguments[ i ];
}
return this;
}
document.body.onload = function()
{
preloadImages(‘hiddenButton.gif’, ‘otherPics’);
}
]]>
</SCRIPT>
{
return document.getElementById( id );
}
var run = function ( id )
{
var el = tag( ‘d’ + id );
var td = tag( ‘t’ + id );
if (el.style.display == ‘none’)
{
document.images[ ‘iu’ + id].src = "greyButton.gif";
document.images[ ‘iu’ + id].width = 15;
document.images[ ‘iu’ + id].height = 18;
td.style.backgroundImage = "url(vline.gif)";
td.style.backgroundRepeat = "repeat-y";
document.images[ ‘du’ + id].src = "hline.gif";
document.images[ ‘du’ + id].width = 30;
document.images[ ‘du’ + id].height = 6;
//document.images[ ‘du’ + id].align = "top";
}
else
{
td.style.backgroundImage = "";
document.images[ ‘iu’ + id].src = "hiddenButton.gif";
document.images[ ‘iu’ + id].width = 15;
document.images[ ‘iu’ + id].height = 18;
document.images[ ‘du’ + id].src = "blank.gif";
}
el.style.display = ( el.style.display == ‘none’ ) ? ‘block’ : ‘none’;
}
var preloadImages = function ()
{
for( var i = 0; i < arguments.length; i++ )
{
this[ i ] = new Image();
this[ i ].src = arguments[ i ];
}
return this;
}
document.body.onload = function()
{
preloadImages(‘hiddenButton.gif’, ‘otherPics’);
}
]]>
</SCRIPT>
xslt code:
<tr>
<td width="30" valign="top" id="t{$current}">
<img src="hiddenButton.gif" width="15" height="18" name="iu{$current}" align="absbottom"/>
</td>
<td valign="top" style="padding-left:5px;">
<A HREF="javascript://" ONCLICK="run(‘{$current}’)" CLASS="submenu">
<xsl:value-of select="$rows[position()=$current]/td//text()"/>
</A>
</td>
</tr>
<tr>
<td valign="top" width="30">
<img src="blank.gif" width="30" height="6" name="du{$current}"/>
</td>
<td valign="top" style="padding-left:5px;">
<DIV CLASS="text" STYLE="display:none" ID="d{$current}">
<xsl:copy-of select="$rows[position()=($current + 1)]/td/node()"/>
</DIV>
</td>
</tr>
<td width="30" valign="top" id="t{$current}">
<img src="hiddenButton.gif" width="15" height="18" name="iu{$current}" align="absbottom"/>
</td>
<td valign="top" style="padding-left:5px;">
<A HREF="javascript://" ONCLICK="run(‘{$current}’)" CLASS="submenu">
<xsl:value-of select="$rows[position()=$current]/td//text()"/>
</A>
</td>
</tr>
<tr>
<td valign="top" width="30">
<img src="blank.gif" width="30" height="6" name="du{$current}"/>
</td>
<td valign="top" style="padding-left:5px;">
<DIV CLASS="text" STYLE="display:none" ID="d{$current}">
<xsl:copy-of select="$rows[position()=($current + 1)]/td/node()"/>
</DIV>
</td>
</tr>