Beginner needs help

cordyline · October 25, 2011, 12:28pm

Hello all.

Trying to create a weather website and want to insert two java image loops. I’ve got one working ok, see below (it’s the european satellite loop)

[URL=“http://www.llanelliweather.co.uk/”]

I want to insert another loop below it. There is currently a low res image loop there for the uk and i want to replace it with a high res image loop. When i insert the code for the second image(uk high res) for some reason, it takes over the european high res image loop above it. Any ideas. see code below for the 2 image loops.

<p class=“autosize” align=“center”><font face=“Arial”><font color=“#0000ff” size=“3”><strong><u>European Visible Satellite Movie </u><br>

     &lt;IMG src='http://www.sat24.com/image.ashx?country=eu&type=slide&time=&index=16&sat=vis' name='SlideShow' width='900' height='650' border=0&gt; 
          &lt;script&gt;

var slideShowSpeed = 1000
var crossFadeDuration = 0
var Pic = new Array()

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter=“blendTrans(duration=2)”
document.images.SlideShow.style.filter=“blendTrans(duration=crossFadeDuration)”
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout(‘runSlideShow()’, slideShowSpeed)
}
</script>

   &lt;!-- &lt;IMG src="http://sat24.com/image.ashx?country=eu&type=loop&sat=vis" width=800 height=600&gt; --&gt;

<p class=“autosize” align=“center”><font face=“Arial”><font color=“#0000ff” size=“3”><strong><u>Britain And Ireland Visible Satellite Movie</u><br>

<body onload=“runSlideShow()”

     &lt;IMG src='http://www.sat24.com/image.ashx?country=gb&type=slide&time=&index=15&sat=vis' name='SlideShow' width='800' height='600' border=0&gt; 
          &lt;script&gt;

var slideShowSpeed = 1000
var crossFadeDuration = 0
var Pic = new Array()

var t
var j = 1
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter=“blendTrans(duration=2)”
document.images.SlideShow.style.filter=“blendTrans(duration=crossFadeDuration)”
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout(‘runSlideShow()’, slideShowSpeed)
}
</script>

   &lt;!-- &lt;IMG src="http://sat24.com/image.ashx?country=gb&type=loop&sat=vis" width=800 height=600&gt; --&gt;

ParkinT · October 25, 2011, 3:06pm

You cannot simply copy-and-paste identical Javascript code in two places on the same page.
The variables and the function are being redefined. It will always use the last one that was defined.
There is no ‘easy fix’ for this. You need a good understanding of Javascript to rewrite the function.
An alternative would be to rename the second function and ALL the variables used.