468,107 Members | 1,470 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

Display image on HTML page using XML

143 100+
I have this product catalog. I am to scroll through the catalog on the HTML page and use data from the XML page to display the different products with a picture of each. I have the data and the scoll functions working great, but I can't tie my pictures to the products. Here's what I have so far:


HTML part:
[HTML]<body>


<xml id="product_cat" src="products.xml"></xml>


<table border="6" bordercolordark="green" bordercolorlight="#CCCCFF" cellpadding="2">

<tr><td rowspan="5" align="center" width="110" bgcolor="#CCCCFF">
<img datasrc="#product_cat" datafld="Photo"><br>
<span datasrc="#product_cat" datafld="Name"></span>
</td>
<td width="120" bgcolor="green">
<span class="rowhead">Part Number:</span>
</td>
<td width="240" bgcolor="white">
<span datasrc="#product_cat" datafld="CPN"></span>
</td>
</tr>
</table>
</body>
[/HTML]

Here's the XML file:

[HTML]<?xml version="1.0" encoding="utf-8" ?>

<CATALOG>



<PROD>
<CPN>TAB1015-10</CPN>
<NAME>Vented Pull Tabs</NAME>
<DESC>These pull tabs are vented.</DESC>
<PRICE>5.00</PRICE>
<HANDLING>0.20</HANDLING>
<Photo><img url="images/VentedPullTabs.jpg" /></Photo>
</PROD>
</CATALOG>[/HTML]



I think the problem is with the <Photo><img url="images/VentedPullTabs.jpg" /></Photo> line in the XML file.

Any Ideas?
Oct 3 '07 #1
5 11786
Dököll
2,364 Expert 2GB
I have this product catalog. I am to scroll through the catalog on the HTML page and use data from the XML page to display the different products with a picture of each. I have the data and the scoll functions working great, but I can't tie my pictures to the products. Here's what I have so far:

Any Ideas?
How about this teddarr!

See if below can be salvaged. Perhaps using img src will do the trick for you:

[HTML]

<a href="index.htm">
<img border="0" src="images/VentedPullTabs.jpg" />
</a>
[/HTML]

Let us know if that works...Welcome!
Oct 4 '07 #2
jkmyoung
2,057 Expert 2GB
I see you're using xml data islands.

I don't know if that ever worked with images, especially when the src url is embedded in another node.

To be honest, Xml Data Islands are only supported by IE, and are being phased out. I would suggest that you consider switching to XSL, or another alternative that works cross-browser.
Oct 4 '07 #3
teddarr
143 100+
In the real world I would consider this, but in the class I am taking, data islands is required for step 1. The professor did warn us not to get upset if the data islands wouldn't work for firefox.

Step 2 uses XSL as part of a search function.
Oct 4 '07 #4
jkmyoung
2,057 Expert 2GB
1st guess then: change path:
<Photo><img url="images/VentedPullTabs.jpg" /></Photo>
<img datasrc="#product_cat" datafld="Photo/img/@url"><br>

2nd guess: use entire data field seperately.
<Photo><span datasrc="#product_cat" datafld="Photo"/></Photo>

Personally doubt either of these work. Haven't used data islands in years.
Oct 4 '07 #5
teddarr
143 100+
OK, Here's what finally worked

In the HTML page:

[HTML]<table border="6" bordercolordark="green" bordercolorlight="#CCCCFF" cellpadding="2">

<tr><td rowspan="5" align="center" width="110" bgcolor="#CCCCFF">
<img datasrc="#product_cat" datafld="graphic" alt="product" height="100px" width="100px">
<span datasrc="#product_cat" datafld="Name"></span>

</td>
<td width="120" bgcolor="green">
<span class="rowhead">Part Number:</span>
</td>
<td width="240" bgcolor="white">
<span datasrc="#product_cat" datafld="CPN"></span>
</td>
</tr> [/HTML]

In the XML page:

[HTML]<PROD>
<CPN>TAB1015-10</CPN>
<NAME>Vented Pull Tabs</NAME>
<DESC>These pull tabs are vented.</DESC>
<PRICE>5.00</PRICE>
<HANDLING>0.20</HANDLING>
<graphic>images/VentedPullTabs.jpg</graphic>
</PROD>[/HTML]

Now the next problem:

On an XSL file, I take in a product name as a search string in a text box. I press the search button. Then the xslProc.output property will not display in the document.write(xslProc.output) statement. Everything works good down to the alert box that is commented out, and for a brief second, I can see that the output property does hold what I am looking for. But then it goes null.

Here's what I have so far:

[HTML]function Button1_onclick() {
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
var xslProc;
var txtsearch = form1.Text1.value;
xslDoc.async = false;
xslDoc.resolveExternals = false;
xslDoc.load("search.xsl");
xslt.stylesheet = xslDoc;
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
xmlDoc.async = false;
xmlDoc.resolveExternals = false;
xmlDoc.load("products.xml");
xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;
// alert(form1.Text1.value);
xslProc.addParameter("NAME",txtsearch);
xslProc.transform();
document.write(xslProc.output);
}[/HTML]
Oct 5 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

23 posts views Thread by Mat | last post: by
11 posts views Thread by Tina | last post: by
3 posts views Thread by Meena Desai | last post: by
5 posts views Thread by Peter Lapic | last post: by
2 posts views Thread by Tim Streater | last post: by
3 posts views Thread by =?Utf-8?B?QmlsbHkgWmhhbmc=?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.