Dropdown button(How it works)

 

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[

  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>

 

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>