2
Hi,
I programmed a web page where two parallel maps can be explored with moving the cursor on the summer and winter buttons. The active button should turn red but now the right hand buttons turn red instead of the left ones. Where's the problem?
[HTML]<HTML>
<META HTTP-EQUIV="Refresh" CONTENT=300>
<HEAD><TITLE>Pa rallel Visual Exploring</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaS cript">
// Animator internal variables
var oldidxLeft = -1;
var oldidxRight = -1;
var isanimLeft = false; // Is animation on
var isanimRight = false;
var timerIDLeft = null;
var timerIDRight = null;
// Data size
var n;
// Preload all images for increased interactive speed
pretimesoffLeft = new Array();
pretimesoffRigh t = new Array ();
pretimesonLeft = new Array();
pretimesonRight = new Array();
preimagesLeft = new Array();
preimagesRight = new Array();
preplayLeft = new Array();
preplayRight = new Array();
function preloadLeft()
{
n = files.length; // Initialize variable here
for(var i=0 ; i<n ; i++)
{
var tmpLeft = timesLeft[i];
pretimesoffLeft[i] = new Image();
pretimesoffLeft[i].src = tbaseLeft+offco lor+tmpLeft+".p ng";
pretimesonLeft[i] = new Image();
pretimesonLeft[i].src = tbaseLeft+oncol or+tmpLeft+".pn g";
preimagesLeft[i] = new Image();
preimagesLeft[i].src = fbase+files[i];
}
preplayLeft[0] = new Image();
preplayLeft[0].src = tbaseLeft+"butt on_play_cyan.pn g";
preplayLeft[1] = new Image();
preplayLeft[1].src = tbaseLeft+"butt on_stop_orange. png";
}
function preloadRight()
{
n = files.length;
for (var i=0 ; i<n ; i++)
{
var tmpRight = timesRight[i];
pretimesoffRigh t[i] = new Image();
pretimesoffRigh t[i].src = tbaseRight+offc olor+tmpRight+" .png";
pretimesonRight[i] = new Image();
pretimesonRight[i].src = tbaseRight+onco lor+tmpRight+". png";
preimagesRight[i] = new Image();
preimagesRight[i].src = fbase+files[i];
}
preplayRight[0] = new Image();
preplayRight[0].src = tbaseRight+"but ton_play_cyan.p ng";
preplayRight[1] = new Image();
preplayRight[1].src = tbaseRight+"but ton_stop_oranss i.png";
}
// Function to change to a new time and picture on left
function showpngLeft(idx Left,overLeft) {
if(idxLeft==old idxLeft) return;
if(idxLeft == n)
{
if(!isanimLeft)
{
isanimLeft = true;
timerIDLeft = setTimeout("doa nimLeft()",dela y);
}
document.images["img"+n].src = preplayLeft[1].src;
}
else
{
if(overLeft)
{
document.images["img"+n].src = preplayLeft[0].src;
if(timerIDLeft) clearTimeout(ti merIDLeft);
isanimLeft = false;
}
if(oldidxLeft >= 0)
document.images["img"+oldidxLef t].src = pretimesoffLeft[oldidxLeft].src;
document.images["img"+idxLe ft].src = pretimesonLeft[idxLeft].src;
document.images["predictionLeft "].src = preimagesLeft[idxLeft].src;
oldidxLeft = idxLeft;
}
}
// Function to change to a new time and picture on right
function showpngRight(id xRight,overRigh t) {
if(idxRight==ol didxRight) return;
if(idxRight == n)
{
if(!isanimRight )
{
isanimRight = true;
timerIDRight = setTimeout("doa nimRight()",del ay);
}
document.images["img"+nRigh t].src = preplayRight[1].src;
}
else
{
if(overRight)
{
document.images["img"+n].src = preplayRight[0].src;
if(timerIDRight ) clearTimeout(ti merIDRight);
isanimRight= false;
}
if(oldidxRight >= 0)
document.images["img"+oldidxRig ht].src = pretimesoffRigh t[oldidxRight].src;
document.images["img"+idxRi ght].src = pretimesonRight[idxRight].src;
document.images["predictionRigh t"].src = preimagesRight[idxRight].src;
oldidxRight = idxRight;
}
}
function doAnimLeft() {
if(!isanimLeft) return;
showpngLeft( (oldidxLeft+1) % n , 0 );
if(oldidxLeft+1 ==n)
timerIDLeft = setTimeout("doa nimLeft()",wrap delay);
else
timerIDLeft = setTimeout("doa nimLeft()",dela y);
}
function doAnimRight() {
if (!isanimRight) return;
showpngRight( (oldidxRight+1) % n, 0);
if(oldidxRight+ 1==n)
timerIDRight = setTimeout("doa nimRight()",wra pdelay);
else
timerIDRight = setTimeout("doa nimRight()",del ay);
}
// Function called to setup the animation
function restart() {
if(timerIDLeft) clearTimeout(ti merIDLeft);
isanimLeft = false;
showpngLeft(0,1 );
// showgif(n-1,1); // last gif
// showgif(n,1); // nth = PLAY
if(timerIDRight ) clearTimeout(ti merIDRight);
isanimRight = false;
showpngRight(0, 1);
}
// Function to produce standard HTML body
function makeAnimBodyLef t()
{
document.writel n('<TABLE BORDER=0 ALIGN=LEFT>');
document.writel n('<TR><TD>');
document.writel n('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>' );
for(i=0 ; i<n ; i++) {
var tmpLeft = timesLeft[i];
document.writel n('<TR><TD><A HREF="javascrip t:void(0)" onMouseOver="sh owpngLeft('+i+' ,1)">');
document.writel n('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+i+'" SRC="'+pretimes offLeft[i].src+'"></A>');
document.writel n('</TD></TR>');
}
document.writel n('<TR><TD><A HREF="javascrip t:void(0)" onMouseOver="ja vascript:showpn gLeft('+n+',1)" >');
document.writel n('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+n+'" SRC="'+preplayL eft[0].src+'"></A></TD></TR>');
document.writel n('</TABLE>');
document.writel n('</TD><TD>');
document.writel n('<TABLE BORDER=0 ALIGN=CENTER>') ;
document.writel n('<TR ALIGN=LEFT>');
document.writel n('<TD><IMG BORDER=1 NAME="predictio nLeft" SRC="'+preimage sLeft[0].src+'"></TD>');
document.writel n('</TR>');
document.writel n('<TR ALIGN=CENTER><T D></TD>');
document.writel n('</TR>');
document.writel n('</TABLE>');
document.writel n('</TD><TD>');
document.writel n('</TD></TR>');
document.writel n('</TABLE>');
}
function makeAnimBodyRig ht()
{
// For the map on the right hand site.
document.writel n('<TABLE BORDER=0 ALIGN=LEFT>');
document.writel n('<TR><TD>');
document.writel n('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>' );
for(i=0 ; i<n ; i++) {
var tmpRight = timesRight[i];
document.writel n('<TR><TD><A HREF="javascrip t:void(0)" onMouseOver="sh owpngRight('+i+ ',1)">');
document.writel n('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+i+'" SRC="'+pretimes offRight[i].src+'"></A>');
document.writel n('</TD></TR>');
}
document.writel n('<TR><TD><A HREF="javascrip t:void(0)" onMouseOver="ja vascript:showpn gRight('+n+',1) ">');
document.writel n('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+n+'" SRC="'+preplayR ight[0].src+'"></A></TD></TR>');
document.writel n('</TABLE>');
document.writel n('</TD><TD>');
document.writel n('<TABLE BORDER=0 ALIGN=CENTER>') ;
document.writel n('<TR ALIGN=LEFT>');
document.writel n('<TD><IMG BORDER=1 NAME="predictio nRight" SRC="'+preimage sRight[0].src+'"></TD>');
document.writel n('</TR>');
document.writel n('<TR ALIGN=CENTER><T D></TD>');
document.writel n('</TR>');
document.writel n('</TABLE>');
document.writel n('</TD><TD>');
// map legend
document.writel n('<TABLE BORDER=0 ALIGN=CENTER>') ;
document.writel n('<TR ALIGN=LEFT>');
document.writel n('<TD><IMG BORDER=0 SRC="Legend.png " width="349" height="420"></TD>');
document.writel n('</TR>');
document.writel n('<TR ALIGN=CENTER><T D></TD>');
document.writel n('</TR>');
document.writel n('</TABLE>');
document.writel n('</TD></TR>');
document.writel n('</TABLE>');
}
// Animation settings
var delay = 2000; //Animation speed
var wrapdelay = 4000;// Wrap-around delay
var tbaseLeft = "./Nappulat/"; // Base name for time steps
var tbaseRight = "./Namiskat/"; // Base name for time steps
var fbase = "./"; // Base name for map files
var oncolor = "red";
var offcolor = "blue";
var files = new Array(
"aniframe_0015_ 1.jpg", "aniframe_0014_ 2.jpg",
"aniframe_0013_ 3.jpg", "aniframe_0012_ 4.jpg",
"aniframe_0011_ 5.jpg", "aniframe_0010_ 6.jpg",
"aniframe_0009_ 7.jpg", "aniframe_0008_ 8.jpg",
"aniframe_0007_ 9.jpg", "aniframe_0006_ 10.jpg",
"aniframe_0005_ 11.jpg", "aniframe_0004_ 12.jpg",
"aniframe_0003_ 13.jpg", "aniframe_0002_ 14.jpg",
"aniframe_0001_ 15.jpg", "aniframe_0000_ 16.jpg");
var timesLeft = new Array("+1stSumm er","+1stSummer ","+Winter","+2 ndSummer","+Win ter", "+3rdSummer","+ Winter","+4thSu mmer","+Winter" ,"+5thSummer ",
"+Winter","+6th Summer","+Winte r","+7thSummer" ,"+Winter","+8t hSummer");
var timesRight = new Array("+1stSumm er","+1stSummer ","+Winter","+2 ndSummer","+Win ter", "+3rdSummer","+ Winter","+4thSu mmer","+Winter" ,"+5thSummer ",
"+Winter","+6th Summer","+Winte r","+7thSummer" ,"+Winter","+8t hSummer");
preloadLeft(); // Must be after the SSI
preloadRight();
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white onLoad="restart ()">
<CENTER>
<H2><FONT COLOR=black>Com pare Occurrence Probabilities of Colorado Beetle</FONT></H2>
<!-- A HREF="_EuropeCD .html"><FONT COLOR="blue">Tu lostussivu Z EuropeCD</FONT></A -->
</CENTER>
<BODY LINK=white VLINK=white ALINK=white>
<SCRIPT LANGUAGE="JavaS cript"><!--
makeAnimBodyLef t();
makeAnimBodyRig ht();
// -->
</SCRIPT>
<NOSCRIPT>
Sivu vaatii vähint&aum l;än Netscape 4.0 tai Internet Explorer 4.0
selaimen, ja että JavaScript on pääll ä.
</NOSCRIPT>
</BODY>
</HTML>[/HTML]
