View Single Post
  #1 (permalink)  
Old June 1st, 2007, 01:23 AM
Akriti Akriti is offline
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default Clickable images Using xml and xsl(Urgent)

i want to make clickable image.on click of repeat image i want to open a new html page.also i am having problem when i click image it is expanding and collapsing the sub childs.Kindly reply
XML used is :
<tree>
<group id="GRP4">
            <name>GRP4</name>
            <next>100</next>
             <repeat>images/repeat.gif</repeat>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents>
                <group id="GRP21">
                <name>GRP21</name>
                <next>101</next>
                <plus>images/plus.gif</plus>
                <repeat>images/repeat.gif</repeat>
                <nextS>102</nextS>
                <icon>images/next.gif</icon>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
                <group id="GRP69">
                <name>GRP69</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
            </contents>
            </group>
                  </tree>

XSL used is :

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">

<xsl:template match="tree">
   <xsl:apply-templates select="group"/>
 </xsl:template>
 <xsl:template match="group">
  <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">
  <xsl:attribute name="plus"><xsl:value-of select="plus"/></xsl:attribute>
  <xsl:attribute name="minus"><xsl:value-of select="minus"/></xsl:attribute>
  <xsl:attribute name="nextS"><xsl:value-of select="nextS"/></xsl:attribute>
  <xsl:attribute name="icon"><xsl:value-of select="icon"/></xsl:attribute>
  <xsl:attribute name="repeat"><xsl:value-of select="repeat"/></xsl:attribute>
  <xsl:attribute name="next"><xsl:value-of select="next"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="STYLE">
    padding-left: 20px;
    cursor: hand;
    <xsl:if expr="depth(this) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="middle">
          <img border="0" id="plus">
            <xsl:attribute name="SRC">
              <xsl:value-of select="plus"/>
            </xsl:attribute>
          </img>
        </td>
        <td valign="middle" nowrap="true">
        <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
        </xsl:attribute>
        <xsl:value-of select="name"/></td>
        </tr>
        <tr valign="middle" nowrap="false">
        <xsl:attribute name="STYLE">
              padding-left: 7px;
              font-family: Verdana;
              font-size: 11px;
              font-color: black;
        </xsl:attribute>
        <xsl:value-of select="next"/>
        <xsl:if test="next">
        <img border="0" id="repeat">
         <xsl:attribute name="SRC">
         <xsl:value-of select="repeat"/>
        </xsl:attribute>
       </img>
         </xsl:if>
     </tr>
         <tr valign="middle" nowrap="false">
     <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
     </xsl:attribute>
      <xsl:value-of select="nextS"/>
      <xsl:if test="nextS">
        <img border="0" id="icon">
         <xsl:attribute name="SRC">
         <xsl:value-of select="icon"/>
         </xsl:attribute>
       </img>
      </xsl:if>
         </tr>

     </table>
  <xsl:apply-templates select="contents/group"/>
 </xsl:template>
</xsl:stylesheet>


JS used is :function clickOnEntity(group) {
  if(group.open == "false" ) {
    expand(group, true)
  }
  else {
    collapse(group)
  }
  window.event.cancelBubble = true
}

function expand(group) {
  var oImage

  oImage = group.childNodes(0).all["plus"]
  oImage.src = group.minus
  for(i=0; i < group.childNodes.length; i++) {
    if(group.childNodes(i).tagName == "DIV") {
      group.childNodes(i).style.display = "block"
    }
  }
  group.open = "true"
}

Thanks



Reply With Quote