how to extract img src from an external list

sallam · 09-22-2012, 09:41 AM

Greetings

I need your help please..
I have a website of 20 pages. Each page displays an image from a catalog located in another domain, and the catalog changes each week, so I have to change the img src attribute each week too (the jpg images are named differently each week, though in the same directory). So instead of editing 20 html pages each time, I'm trying to find a way to control the img src from a text file, so that I edit only that text file once a week.

Is there a way to extract img src attributes from a text file or js file please?
For example I need page 1 to extract the first img src listed in the text file, and page 2 to extract the second src listed, etc.
I'm new to js so please give an example of the code that I should use.

Many thanks.

vwphillips · 09-22-2012, 12:32 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<img id="tst" />

<script type="text/javascript">
/*<![CDATA[*/

function ajax(url,id,nu){
 var request=false;
 if (window.ActiveXObject){
  try {
   request=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e){
   try {
    request=new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e){
   }
  }
 }
 else if (window.XMLHttpRequest){
  request=new XMLHttpRequest();
 }
 else {
  return false;
 }
 request.onreadystatechange=function(){ ajaxpopulate(request,document.getElementById(id),nu); }
 request.open('GET',url+'?'+new Date().getTime(),true);
 try {
  request.send(null);
 }
 catch (e){
 }
}

function ajaxpopulate(request,obj,nu){
 if (request.readyState==4&&(request.status==200||window.location.href.indexOf("http")==-1)){
  var src=request.responseText.split('\n')[nu];
  if (obj&&src){
   obj.src=src;
  }
 }
}

ajax('ajaximg.txt','tst',1)
/*]]>*/
</script>
</body>

</html>

ajaximg.txt

Code:

http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg
http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg
http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg

sallam · 09-22-2012, 12:46 PM

Thanks very much.
I've tried your code (created test.html and ajaximg.txt in my pc desktop), but the test page didn't display any images. Do the files need to be uploaded to a server for them to work?

vwphillips · 09-22-2012, 03:27 PM

both files need to be in the same directory

or the file path of ajaximg.txt needs to be specified in the call

in any event both files must be in the same domain

sallam · 09-23-2012, 06:53 AM

Yes, both files are on my desktop. But the test.html page loads nothing. I'm confused.. what is wrong?..
I tried the images and each loads fine on their own browser tabs. But still the page loads no images...