|
|
 next
|
  Subject: Generating image from XML and XSL files.
Author: Gregory Torry
Date: 18 Sep 2006 03:55 PM
|
I've been usning XML and XSL for a whole 3 days now, so I guess I'm a newbie. I'm using Oxygen as my editor and debugger for XML and XSL files respectivefully. I've created a circle image and I want to modify that image by pressing on buttons - Change button to change the color, Scale button to scale the image by a certain percentage, and Reset button to return circle to its original state. See XML and XSL code below. Please help:
XML code:
<?xml-stylesheet type="text/xsl" href="simple.xsl" alternate="no" ?>
<root />
XSL code:
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html xmlns:svg="http://www.w3.org/2000/svg">
<object id="AdobeSVG"
CLASSID="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
</object>
<xsl:processing-instruction name = "import" >
namespace="svg" implementation="#AdobeSVG"
</xsl:processing-instruction>
<head>
<title>SVG Example</title>
</head>
<script>
function
change_style(style_string)
{
document.getElementById("circ").setAttribute("style", style_string);
}
</script>
<body>
<!-- style="font-family:Arial;font-size:12pt"
<input type="submit" id="btn_sub" name="btn_sub" value="Change" />
<input type="submit" id="btn_min" name="btn_min" value="Minimize" />
<input type="reset" id="btn_reset" name="btn_reset" value="Reset" />
-->
<button onclick_="change_style('fill:green:');" type="submit">Change</button>
<button onclick_="change_style(0.5);" type="submit">Scale</button>
<button onclick_="change_style();" type="submit">Return</button>
<svg:svg width="190px" height="190px" viewBox="0 0 190 190">
<svg:circle cx="80" cy="80" r="60" id="circ" fill="blue" stroke="black" stroke-width="2"/>
</svg:svg>
<footer>
<h4>
Change image color, minimize image size, and reset image to original state.
</h4>
</footer>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
This was an example I found on line. The only thing I did was add 3 buttons to make changes to the image (A blue circle). Change the color to green, scale the image .25 its size, and reset to original image. When I click on any of the buttons, nothing happens. So, I'm just looking for code to change color, scale image, and reset image.
|
|
|
|
top