Mouse events, xml values and Javascript

Forum Moderators: open

Message Too Old, No Replies

Mouse events, xml values and Javascript

freddo

5:00 am on Jul 7, 2006 (gmt 0)

I am wanting to replace the two values 560, 420 with two xml variables in the following code

I have tried the following without success:

<a href="#" onmouseover="zoom("<xsl:value-of select='imagesize/@width'/>","<xsl:value-of select='imagesize/@height'/>",'logo','in')" onmouseout="clearzoom()">Zoom In</a>

Zoom is a Javascript function in the xsl code - function zoom(originalW, originalH, what, state)

How do I substitute the two xml variables
<xsl:value-of select='imagesize/@width'/> and
<xsl:value-of select='imagesize/@height'/>

Thanks Freddo

choster

5:42 am on Jul 7, 2006 (gmt 0)

IMHO easiest thing is to use curly brace notation.

[webmasterworld.com...]
[w3.org...]

freddo

5:57 am on Jul 7, 2006 (gmt 0)

Thanks Choster - I have read those two posts but am not sure how to apply them in this situation. Can you help a little further with the example above?

Thanks Freddo

choster

7:10 pm on Jul 7, 2006 (gmt 0)

I would think

in your stylesheet should produce your desired output. The long way to do it would be

freddo

9:44 pm on Jul 7, 2006 (gmt 0)

Hi choster thanks again - I tried both of those suggestions without success. The first
<a href="#" onmouseover="zoom({imagesize/@width},{imagesize/@height},'logo','in')" onmouseout="clearzoom()">Zoom In</a>

gave the following in the html

without resolving the {..} to values

The second would not produce the html

choster

10:52 pm on Jul 7, 2006 (gmt 0)

And are you sure you have the right XPath? Test to make sure your desired values are appearing if you do a simple output of <xsl:value-of select="imagesize/@width"/>.

What parser are you using? I should have noted that the code in your first post is not valid XML, so the whole thing should have blown up.

If neither of these is the issue, can you post the whole template? Without context it is impossible to tell what could be interfering.

freddo

5:21 am on Jul 8, 2006 (gmt 0)

Hi again - thanks for your help so far. Below is the full code for the xsl page I am working with.

Lines 82-84 are where I want to replace the 560 and 420 with the xml tags. These 3 lines are onmouse calls to the javascript function "zoom"

xsl:value-of select="imagesize/@width"/>
xsl:value-of select="imagesize/@height"/>

--------------------------------
<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<xsl:apply-templates/>
</HTML>
</xsl:template>
<xsl:template match="photos">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="album">
<xsl:apply-templates select="imagelist"/>
</xsl:template>
<xsl:template match="imagelist">
<xsl:apply-templates select="imageinfo"/>
</xsl:template>
<xsl:template match="imageinfo">
<xsl:element name="ixfile">
<xsl:attribute name="fname"><xsl:value-of select="html_info/@fname"/></xsl:attribute>
<head>

function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}

function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""��state=="restore"){
whatcache.style.width=originalW
whatcache.style.height=originalH
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}
]]></xsl:comment>
</script>

</head>

<table border="0" align="center" background=""><tr><td>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td><table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tr>
<td background="graphics/tleft2.gif">
<br kludge=""/></td>
<td height="20" background="graphics/top2.gif">
<br kludge=""/></td>
<td background="graphics/tright2.gif">
<br kludge=""/></td>
</tr>
<tr>
<td width="20" background="graphics/left2.gif">
<br kludge=""/></td>
<td>
<table width="100%">
<tr><br kludge=""/><div align="center">
<font face="Arial, Helvetica, sans-serif" size="4" ><b>
<xsl:value-of select="title"/></b></font><br/><br/>
<a href="#" onmouseover="zoom(560,420,'logo','in')" onmouseout="clearzoom()">Zoom In</a> �
<a href="#" onmouseover="zoom(560,420,'logo','restore')">Normal</a> �
<a href="#" onmouseover="zoom(560,420,'logo','out')" onmouseout="clearzoom()">Zoom Out</a>
</div>
<td><div align="center">
<IMG name="logo" border="1" vspace="20" hspace="50">
<xsl:attribute name="src"><xsl:value-of select="@fname"/></xsl:attribute>
<xsl:attribute name="width"><xsl:value-of select="imagesize/@width"/></xsl:attribute>
<xsl:attribute name="height"><xsl:value-of select="imagesize/@height"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="title"/></xsl:attribute>
</IMG><br kludge=""/>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="80%" height="62">
<tr>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tr>
<td width="75" valign="top"><br kludge=""/>
<div align="center"><xsl:apply-templates select="previous"/></div></td>
<td valign="top"><div align="center"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="21">
<div align="center"><img border="0" src="graphics/transparenth120.gif" width="1" height="1"/></div>
</td>
<td valign="top"></td>
<td width="21">
<div align="center"><img border="0" src="graphics/transparenth120.gif" width="1" height="1"/></div>
</td>
</tr>
<tr>
<td colspan="3">
<div align="center">
<font face="Arial, Helvetica, sans-serif" size="2" ><xsl:apply-templates select="description">

<xsl:template>
<xsl:copy>
<xsl:apply-templates select="@* � * � comment() � pi() � text()"/>
</xsl:copy>
</xsl:template>
</xsl:apply-templates></font></div>
</td>
</tr>
</table><br/><a href="index.htm"><img src="graphics/index3.gif" alt="" width="43" height="13" border="0"/></a></div></td>
<td width="75" valign="top"><br kludge=""/><div align="right"><xsl:apply-templates select="next"/></div></td></tr>

</table></td></tr>
</table></div></td></tr></table></td>
<td width="20" valign="top" background="graphics/right2.gif">
<br kludge=""/></td>
</tr>

</body>
</xsl:element>
</xsl:template>

<xsl:template match="previous">
<xsl:value-of/>
<xsl:choose>
<xsl:when match="previous[@fname!= '']">
<A><xsl:attribute name="href"><xsl:value-of select="@fname"/></xsl:attribute>
<img src="graphics/back3.gif" width="54" height="19" border="0"/></A>
</xsl:when>
<xsl:otherwise>
<img src="graphics/back3grey.gif" width="54" height="19" border="0"/>

</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template match="next">
<xsl:value-of/>
<xsl:choose>
<xsl:when match="next[@fname!= '']">
<A><xsl:attribute name="href"><xsl:value-of select="@fname"/></xsl:attribute>
<img src="graphics/forward3.gif" width="54" height="19" border="0"/></A>
</xsl:when>
<xsl:otherwise>
<img src="graphics/forward3grey.gif" width="54" height="19" border="0"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template match="index">
<xsl:value-of/>
<xsl:choose>
<xsl:when match="index[@fname!= '']">
<A><xsl:attribute name="href"><xsl:value-of select="@fname"/></xsl:attribute>
<img src="graphics/index3.gif" width="19" height="41" border="0"/></A>
</xsl:when>
<xsl:otherwise>
<img src="graphics/index3.gif" width="19" height="41" border="0"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

</xsl:stylesheet>
------------------------

Thanks again Freddo

freddo

7:56 am on Jul 10, 2006 (gmt 0)

Problem solved

Created two javascript variables

then placed those in the onmouseover calls as follows

<a href="#" onmouseover="zoom(width,height,'logo','in')" onmouseout="clearzoom()">Zoom In</a>¦

Freddo