Member Avatar for flub

Hi All,

I wonder if any Javascript experts can help me. I have the following code on my site which create a rotating graphic in the header every time the page loads. This works great.

However what I want to do is to change the way it works slightly so that I do not have to update the code in the future.

I would like to be able to put all the image address into a text file and then for the javascript to read them from there rather than hard codeing into the web page

or

for the javascript to read all the filenames from a directory of another server?

Is this possible and can anyone help me.

Many thank in advance.

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

Basically my script works by overwriting the 'background' definition at the <body> part of the template. I wrote the following right after the <body> tag:

<script type="text/javascript">

var banner= new Array()

banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>
  • 4 Contributors
  • 4 Replies
  • 117 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by flub
Member Avatar for katarey

HI,

Yes this very Much possible you can use the XML file for store the URLs,
I this in one of my project ;)

here is the solution:

For Example:http://www.katarey.com/forHelp/xml_javascript.html

make a XML file Name

img.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<images>
<img>http://static.flickr.com/84/269053449_acad87a793_o.jpg</img>
<img>http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg</img>
<img>http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg</img>
<img>http://static.flickr.com/108/269053262_608edbdda4_o.jpg</img>
<img>http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg</img>
</images>

then a html/php/asp what ever, i am using xml_javascript.html

xml_javascript.html

<script type="text/javascript">
//http://www.katarey.com
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("img.xml")
var banner= new Array()

nodes=xmlDoc.documentElement.childNodes
banner[0]= nodes.item(0).text
banner[1]= nodes.item(1).text
banner[2]= nodes.item(2).text
banner[3]= nodes.item(3).text
banner[4]= nodes.item(4).text

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP; width:740px; height:185px;');
document.write(" }");
document.write("</style>");

//Remove this Linke after testing
alert(banner[random]);
//*******************************

</script>
<body>
<div id="header"> </div>
</body>

Rahul
http://www.katarey.com

Member Avatar for MattEvans

That'll only work in Internet Explorer surely? :| Do Netscape have an XMLDOM object equivalent? I know you can use a XMLHTTP transaction in Windows AND Netscape... but that's possibly overkill.

http://www.jibbering.com/2002/4/httprequest.html

Member Avatar for BudBrocken

Try this:

var xmlDoc;
if (window.ActiveXObject)
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
else if (document.implementation && document.implementation.createDocument)
     xmlDoc= document.implementation.createDocument("","doc",null);
Member Avatar for flub

Thanks everyone, I will give it a try.

Many many thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.