Images through XML into to HTML

Question

I have a folder of images, these images need to display on a HTML page I'm using a excel spreadsheet exported to XML which is imported into HTML using Javascript: (copied and pasted from w3schools).

What I need to do is get the images from the images folder using XML and display it in between h2 and h3.

How do I do this and what would it look like in the XML file and Javascript below? Each div (below) then needs to be a link to different pages?

Also the items on the XML needs to be indexable/searchable I have google custom site search.

Thanks in advance.

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cdcat.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;


var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
 document.write("<div  class=\"feat_product\"><h2>");
 document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
 document.write("</h2><h3>");
 document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
 document.write("</h3></div>");
 }
</script>

Answer 1

I will not write your code for you, but explain the approach:

You need to use img elements and set the src attribute to the public path the images are exposed on. This is in javascript.

In your XML, for each CD element you will need to pass in the image path as well to be consumed by the javascript.