How to load image from another page

hello,

I am using JavaScript to do the following:

I have 2 pages that I am using..

Page 1 has all the images on it (images.htm)
Page 2 is the page I want to display the images. (main.htm)

So what I am tring to do is, on Page 1 it has a image on there using the img tag it also has a ID tag.

I want to use Page 2 get that image source from page 1 by the img tag using the ID tag.

however there is more than 1 image on Page 1. but once I work out how to do one I will know how to do the rest.

I know this sounds silly to load the page this way, but Page 1 no one will see and I want to be able to get the image source from that page.

anyone have any ideas on how to do this? Hope you understand what I am tring to do.

So far I know how to get the image source if it's on the same page but don't know how to get the image source from another local page..

Code:

---

var a=document.getElementsByTagName('a');
for(var i=0; i<a.length; i++)
{
    var img=a[i].getElementsByTagName('img');
    for(var j=0; j<img.length; j++)
    {
        alert(img[j].src);
    }
}

---

Thanks.

First off, that is very inefficient, incorrect code. You're looking through all the anchors just to search within for <img> tags. Why even bother? One simple loop through all the <img> tags will be sufficient.

Second, your bigger issue is going to be reading from another page. Unless you're loading the content through AJAX, you're going to get denied access do to cross page scripting.

hello,

thanks for the feedback..

but how would you do it with ajax?

One of the simplest JavaScript uses...http://w3schools.com/ajax/default.asp

Hello,

Thanks for pointing me to the correct way..

I ended up creating something simple

Code:

---

<script type="text/javascript">
var testing = $.get("test.htm", function(data){
alert(data);
});
</script>

---

however, how can I only get some parts of the HTML it returns?

I only want to be able to read the IMG tags only not the whole lot.

Any ideas?

Thanks.

Hello,

Still have problems doing it..

so far I can get the HTML Source of the page I want to get the data from, but can't parse the tags from the code.

Any ideas?

Code:

---

<script type="text/javascript">
var testing = $.get("test.htm", function(data){
                       
var arr = new Array();
      arr = document.getElementsByTagName("IMG");
var feed = arr[1].getAttribute("src");
      alert(feed);

});
</script>

---

Since I don't know what your get() function is, I really cannot help you...and even greater a question, why are you even bothering with that?

Code:

---

var xmlhttp;
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}
else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var imgs = xmlhttp.responseText.getElementsByTagName("img");
    // now work with your images
  }
}
xmlhttp.open("GET", "page.html", true);
xmlhttp.send();

---