Dynamically displaying an image from XML with javascript

Question

I'm very new to HTML. I am trying to load an XML which contains image names and display it in a div dynamically. I can see the image names but can't assing img a source.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

xmlhttp.open("GET","resimler.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
x=xmlDoc.getElementsByTagName("pic");
i=0;

function displayFoto(){
ad=(x[i].getElementsByTagName("ad")[0].childNodes[0].nodeValue);
document.getElementById("showFoto").innerHTML="img/" + ad;}

function next(){
if (i<x.length-1){
  i++;
  displayFoto();}}

function previous(){
if (i>0){
  i--;
  displayFoto();}}
</script>
</head>
<body onload="displayFoto()">
<div id='showFoto'><img id='showFoto'></img></div><br>
    <input type="button" onclick="previous()" value="<<" />
    <input type="button" onclick="next()" value=">>" />
</body>
</html>

Can anyone please guide me?

It's hard to tell you what to do when we don't even know what the XML looks like. Also, your AJAX code doesn't look quite right to me. Shouldn't you have some sort of handler for onreadystatechange to know when the request is complete and the response is available? — Fad
– Fad, Commented Oct 4, 2012 at 14:20

ymutlu · Accepted Answer · 2012-10-04 14:36:20Z

1

document.getElementById("showFoto").src="img/" + ad;

this would help you to load image but i dont garanty about rest of the code. You better look for Loader frameworks and jquery.

answered Oct 4, 2012 at 14:36

ymutlu

6,7394 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sanjay chavan · Accepted Answer · 2012-10-04 14:32:21Z

0

I agree with Kemal, just give a snipet of your xml and also the id for div and img tag is same, is that something you are unaware of it or just intentional

answered Oct 4, 2012 at 14:32

sanjay chavan

113 bronze badges

1 Comment

Toykoc Over a year ago

Oh, yeah I think thats a mistake now. Here is my xml, it works fine, I can get the content of XML right. I just dont know how to use that content as a img source. <?xml version="1.0" encoding="ISO-8859-1"?> <vector> <pic> <ad>01-Wedding.jpg</ad> <txt>1</txt> </pic> <pic> <ad>02-Wedding.jpg</ad> <txt>1</txt> </pic> <pic> <ad>03-Wedding.jpg</ad> <txt>1</txt> </pic> </vector>

Omsagar Gupta · Accepted Answer · 2015-03-13 11:56:43Z

    <script type="text/javascript">

        function loadXMLDoc()
        {
            if (window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    xmlDoc = xmlhttp.responseXML;
                    var Image = "";
                    x = xmlDoc.getElementsByTagName("IMAGE");

                    for (i = 0; i < x.length; i++)
                    {
                        Image = Image + x[i].childNodes[0].nodeValue + " ";
                        var res = Image.split(" ");

                        var ii = res[i];
                        var img = document.createElement("img");
                        img.src = ii;
                        img.width = 150;
                        img.height = 100;

                        document.body.appendChild(img);
                    }

                }
            }
            xmlhttp.open("GET", "ll.xml", true);
            xmlhttp.send();
        }
    </script>

</head>
<body onload="loadXMLDoc()">

</body>

Collectives™ on Stack Overflow

Dynamically displaying an image from XML with javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related