webmasterbeta
New Member
For a class project, my group is doing a recipe book utilizing XML that has
cooking terms that users can mouseover to get a definition(which comes from another XML file. Anyway, the function works, but it puts the definition at the top of the page instead of by the word. I'm stumped by this and am looking for suggestions. I thinking it may be the XLST-but I'm a newbie. Here is a copy of the XSLT. Am I missing something obvious? Thanks for any help.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl
utput doctype-public="-//W3C//DTD HTML 4.01//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd" method="html" encoding="ISO-8859-1"/>
<!--
There are three logical ways to create documents with RecipeBook XML.
This gives three logical choices for root elements:
* cookbook - for a collection of recipes
* section - for part of a cookbook
* recipe - for a stand-alone recipe
The templates for converting each of these top-level elements into an
HTML page are shown below:
-->
<!-- cookbook as the root element -->
<xsl:template match="/cookbook">
<html>
<head>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"recipebook.css"/>
<meta name="generator" content="recipebook.xsl"/>
<title><xsl:value-of select="title"/></title>
</head>
<body id="mybody">
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<!-- section as the root element -->
<xsl:template match="/section">
<html>
<head>
<link rel="stylesheet" type="text/css" href="recipebook.css"/>
<meta name="generator" content="recipebook.xsl"/>
<title><xsl:value-of select="title"/></title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<!-- recipe as the root element -->
<xsl:template match="/recipe">
<html>
<head>
<link rel="stylesheet" type="text/css" href="recipebook.css"/>
<meta name="generator" content="recipebook.xsl"/>
<title><xsl:value-of select="title"/></title>
<SCRIPT LANGUAGE="JavaScript" SRC="lib.js"></SCRIPT>
</head>
<body>
<div id="balloon" style="padding:3px; font-size:8pt; background-color:yellow; color:black; border:1px solid black; position:absolute; visibility:hidden;">
</div>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<!--
HTML markup is treated differently when section and recipe are not
root elements. Specifically these elements are wrapped in <div> tags.
-->
<!-- section as a non-root element (part of a cookbook) -->
<xsl:template match="/cookbook/section">
<div class="section">
<xsl:apply-templates/>
</div>
</xsl:template>
<!-- recipe as a non-root element (part of a cookbook or section) -->
<xsl:template match="section/recipe">
<div class="recipe">
<xsl:apply-templates/>
</div>
</xsl:template>
<!-- Titles receive different HTML markup depending on parent. -->
<!-- cookbook title -->
<xsl:template match="/cookbook/title">
<h1 class="cookbook-title"><xsl:value-of select="."/></h1>
</xsl:template>
<!--code omitted for brevity-->
<!-- preparation -->
<xsl:template match="cookingterm">
<font onmouseover="infoBalloon_On(event);" onmouseout="infoBalloon_Off();" color="red" class="cookingterm"><xsl:value-of select="."/></font>
</xsl:template>
cooking terms that users can mouseover to get a definition(which comes from another XML file. Anyway, the function works, but it puts the definition at the top of the page instead of by the word. I'm stumped by this and am looking for suggestions. I thinking it may be the XLST-but I'm a newbie. Here is a copy of the XSLT. Am I missing something obvious? Thanks for any help.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl
utput doctype-public="-//W3C//DTD HTML 4.01//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd" method="html" encoding="ISO-8859-1"/><!--
There are three logical ways to create documents with RecipeBook XML.
This gives three logical choices for root elements:
* cookbook - for a collection of recipes
* section - for part of a cookbook
* recipe - for a stand-alone recipe
The templates for converting each of these top-level elements into an
HTML page are shown below:
-->
<!-- cookbook as the root element -->
<xsl:template match="/cookbook">
<html>
<head>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"recipebook.css"/>
<meta name="generator" content="recipebook.xsl"/>
<title><xsl:value-of select="title"/></title>
</head>
<body id="mybody">
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<!-- section as the root element -->
<xsl:template match="/section">
<html>
<head>
<link rel="stylesheet" type="text/css" href="recipebook.css"/>
<meta name="generator" content="recipebook.xsl"/>
<title><xsl:value-of select="title"/></title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<!-- recipe as the root element -->
<xsl:template match="/recipe">
<html>
<head>
<link rel="stylesheet" type="text/css" href="recipebook.css"/>
<meta name="generator" content="recipebook.xsl"/>
<title><xsl:value-of select="title"/></title>
<SCRIPT LANGUAGE="JavaScript" SRC="lib.js"></SCRIPT>
</head>
<body>
<div id="balloon" style="padding:3px; font-size:8pt; background-color:yellow; color:black; border:1px solid black; position:absolute; visibility:hidden;">
</div>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<!--
HTML markup is treated differently when section and recipe are not
root elements. Specifically these elements are wrapped in <div> tags.
-->
<!-- section as a non-root element (part of a cookbook) -->
<xsl:template match="/cookbook/section">
<div class="section">
<xsl:apply-templates/>
</div>
</xsl:template>
<!-- recipe as a non-root element (part of a cookbook or section) -->
<xsl:template match="section/recipe">
<div class="recipe">
<xsl:apply-templates/>
</div>
</xsl:template>
<!-- Titles receive different HTML markup depending on parent. -->
<!-- cookbook title -->
<xsl:template match="/cookbook/title">
<h1 class="cookbook-title"><xsl:value-of select="."/></h1>
</xsl:template>
<!--code omitted for brevity-->
<!-- preparation -->
<xsl:template match="cookingterm">
<font onmouseover="infoBalloon_On(event);" onmouseout="infoBalloon_Off();" color="red" class="cookingterm"><xsl:value-of select="."/></font>
</xsl:template>