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