PDA

Click to See Complete Forum and Search --> : Re-loading problem

rincewind
05-08-2003, 01:09 PM
Hi,
I've written some to rotate 14 gif banners through there vertical positions, i.e. when the time comes the top gif moves to the bottom and etc etc. The problem I'm having is that when the switch takes place the gifs are re-downloaded. Is there any way to avoid this?
Thanks for any help!

Here's the code
----------------------------------------------------------------
<html>
<head>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--

// preload pictures
var aimage = new Image(120,6);
aimage.src = "dci.jpg";
var bimage = new Image(120,6);
bimage.src = "kogel.gif";
var cimage = new Image(120,6);
cimage.src = "thompson.gif";
var dimage = new Image(120,6);
dimage.src = "treacy.gif";
var eimage = new Image(120,6);
eimage.src = "mercedes.gif";
var fimage = new Image(120,6);
fimage.src = "mandata.gif";
var gimage = new Image(120,6);
gimage.src = "job.gif";
var himage = new Image(120,6);
himage.src = "murphy.jpg";
var iimage = new Image(120,6);
iimage.src = "michelin.gif";
var jimage = new Image(120,6);
jimage.src = "automo.jpg";
var kimage = new Image(120,6);
kimage.src = "pirelli.jpg";
var limage = new Image(120,6);
limage.src = "emo.jpg";
var mimage = new Image(120,6);
mimage.src = "lagan.jpg";
var nimage = new Image(120,6);
nimage.src = "speed.gif";

var contents = new Array(14)
contents[0] = "<A HREF='http://www.dcicard.ie/'><IMG src='dci.jpg' border='0' width='120' height='60'></A><BR><BR>";
contents[1] = "<A HREF='http://www.kogelireland.com'><IMG src='kogel.gif' border='0' width='120' height='60'></A><BR><BR>";
contents[2] = "<A HREF='adverts/thompson/thompson.htm'><IMG src='thompson.gif' border=0 width=120 height=60></A><BR><BR>";
contents[3] = "<A HREF='adverts/treacy.asp'><IMG src='treacy.gif' border=0 width=120 height=60></A><BR><BR>";
contents[4] = "<A HREF='http://www.mercedes-benz.ie'><IMG src='mercedes.gif' border=0 width=120 height=60></A><BR><BR>";
contents[5] = "<A HREF='http://www.mandata.co.uk'><IMG src='mandata.gif' border=0 width=120 height=60></A><BR><BR>";
contents[6] = "<A HREF='topics/recruit/recruitment.asp'><IMG src='job.gif' border=0 width=120 height=60></A><BR><BR>";
contents[7] = "<A HREF='http://www.murphybodybuilders.com'><IMG src='murphy.jpg' border=0 width=120 height=60></A><BR><BR>";
contents[8] = "<A HREF='http://www.michelin.co.uk/truck'><IMG src='michelin.gif' border=0 width=120 height=60></A><BR><BR>";
contents[9] = "<A HREF='http://www.asc.ie'><IMG src='automo.jpg' border=0 width=120 height=60></A><BR><BR>";
contents[10] = "<A HREF='http://www.pirelli.com'><IMG src='pirelli.jpg' border=0 width=120 height=60></A><BR><BR>";
contents[11] = "<A HREF='http://www.emo.ie'><IMG src='emo.jpg' border=0 width=120 height=60></A><BR><BR>";
contents[12] = "<A HREF='http://www.lagangroup.com'><IMG src='lagan.jpg' border=0 width=120 height=60></A><BR><BR>";
contents[13] = "<A HREF='http://www.iol.ie/%7Erainwash/index.htm'><IMG src='speed.gif' border=0 width=120 height=60></A><BR><BR>";

var i=0;
var check=1;
function start()
{
setInterval("rotateit()",15000);
}
function rotateit()
{
if(i==check){check=i+1;i=i+1;}else{i=i+1;}
if(check==14){check=0;i=0;}
if(i>=13){i=0;}else{i=i+1;};document.all.banner0.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner1.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner2.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner3.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner4.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner5.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner6.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner7.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner8.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner9.innerHTML = contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner10.innerHTML =contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner11.innerHTML =contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner12.innerHTML =contents[i];
if(i>=13){i=0;}else{i=i+1;};document.all.banner13.innerHTML =contents[i];
}
// -->
</SCRIPT>
</head>
<body onLoad="start()">
<table>
<TR><td id="banner0"><A HREF='http://www.dcicard.ie/'><IMG src="dci.jpg" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner1"><A HREF='http://www.kogelireland.com'><IMG src="kogel.gif" border="0" width="120" height="60"></A>
</td></tr>
<TR><td id="banner2"><A HREF='adverts/thompson/thompson.htm'><IMG src="thompson.gif" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner3"><A HREF='adverts/treacy.asp'><IMG src="treacy.gif" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner4"><A HREF='http://www.mercedes-benz.ie'><IMG src="mercedes.gif" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner5"><A HREF='http://www.mandata.co.uk'><IMG src="mandata.gif" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner6"><A HREF='topics/recruit/recruitment.asp'><IMG src="job.gif" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner7"><A HREF='http://www.murphybodybuilders.com'><IMG src="murphy.jpg" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner8"><A HREF='http://www.michelin.co.uk/truck'><IMG src="michelin.gif" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner9"><A HREF='http://www.asc.ie'><IMG src="automo.jpg" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner10"><A HREF='http://www.pirelli.com'><IMG src="pirelli.jpg" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner11"><A HREF='http://www.emo.ie'><IMG src="emo.jpg" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner12"><A HREF='http://www.lagangroup.com'><IMG src="lagan.jpg" border=0 width=120 height=60></A>
</td></tr>
<TR><td id="banner13"><A HREF='http://www.iol.ie/%7Erainwash/index.htm'><IMG src="speed.gif" border=0 width=120 height=60></A>
</td></tr>
</table>
</body>
</html>
----------------------------------------------------
Jona
05-08-2003, 01:31 PM
You're using innerHTML instead of .src. Change the href of the link and the src of the image instead of using innerHTML.
rincewind
05-08-2003, 01:51 PM
Sorry, I don't follow, i dunno what inner Html is and I though i was usin .src <img src =....> no?
Thanks for the help btw
Jona
05-08-2003, 02:11 PM
innerHTML is what is put into the DIV. When you change the image and link, you update the innerHTML of the DIV (or whatever tag is holding it). For more information on innerHTML see the MSDN reference: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp

Did you write this script?

The src is used in the <img> tag, true, but if you're preloading the images, you use Javascript to point to the already downloaded source file (src). Example: document.images['imgName'].src=image_1.src (where image_1 is a preloaded image).
rincewind
05-08-2003, 02:32 PM
Yeah I wrote it with help from batfink (different forum) but we both got stuck on this problem, I'm new to js (i mainly write java but an applet wasn't acceptable for this)
So basically instead of using regular tags in the body of the page I should use javascript document.images to place the gifs?
I'll have a look at that link also, thanks again
Jona
05-08-2003, 02:41 PM
If I had more time, I could solve the whole thing for you. Unfortunately, "due to circumstances beyond my control," I cannot be of further assistance at this time.
rincewind
05-08-2003, 02:44 PM
Thats grand thanks, I'm short on time myself at mo 2, I see what you mean by the innerHtml, do i change the document.all.... lines of code or the array creation code for the links? (i.e. conts[])
Jona
05-08-2003, 02:50 PM
Both. Instead of using document.all, use document.getElementById(bannern).innerHTML (where "n" is a number from 0 to the last banner number).

Instead of DIVs, as I originally thought, you are using TDs, which is fine.

In the link code, you will only need to put one thing: contents[0] = "<a href='file.html'>" (for each 0 through 14). Notice you do not end the anchor (<a>). This is because the image will be dynamically generated, and then you will append the </a> HTML as a string.
Jona
05-08-2003, 02:54 PM
Here's a better way of putting it (so that you will understand better):

contents[0] = "<A HREF='http://www.dcicard.ie/'>";

if(i>=13){i=0;}else{i=i+1;};document.getElementById(banner0).innerHTML = contents[i] + "<img name='dcicard'></a><br><br>"; document.images['dcicard'].src=aimage.src;
rincewind
05-08-2003, 02:57 PM
Thanks, I'll get back 3 u if I have any more problems, Thanks again
Jona
05-08-2003, 02:58 PM
No problem at all. :)