Images in html from xml thru xsl |
Images in html from xml thru xsl |
joyful |
Mar 23 2011, 07:35 PM
Post
#1
|
Advanced Member Group: Members Posts: 239 Joined: 15-November 10 Member No.: 13,147 |
Hey,
I am trying to display a image from a xml file into a html page using xsl. This is what my xml looks like: CODE <?xml version="1.0" encoding="UTF-8"?> <category> <item> <image><img src="images/Bracelets/two tone cuffs.jpg"></image> <title>my first image</title> <description>this is my test image and description</description> </item> </category> this is my xsl: CODE <?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="../category.xml" --> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">images</th> <th align="left">title</th> <th align="left">description</th> </tr> <xsl:for-each select="category/item"> <tr> <td><img> <xsl:attribute name="src"> <xsl:value-of select="image"/> </xsl:attribute></img></td> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="description" /></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> and this is my html page: CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script> function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",dname,false); xhttp.send(""); return xhttp.responseXML; } function displayResult() { xml=loadXMLDoc("category.xml"); xsl=loadXMLDoc("category.xsl"); // code for IE if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById("example").innerHTML=ex; } // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor=new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml,document); document.getElementById("example").appendChild(resultDocument); } } </script> </head> <body onload="displayResult()"> <div id="example" /> </body> </html> This code fails to display images (it does display text). How can I make it display images? Thanks in advance! -- This post has been edited by joyful: Mar 23 2011, 08:08 PM |
Lo-Fi Version | Time is now: 25th April 2024 - 11:49 PM |