Hi, The problem was that the both set of buttons need separate 'names' in order to function separately. All I had to do was to replace the all the "img"s at showpngLeft function to "imgLeft"s (lines 88,94,99,101) and the very same action in parallel showpngRight function. At the document body I just altered NAME='img' to NAME='imgLeft' (lines 195,199) and 'imgRight' respectively.Regarding the animation, I had typed function in two different ways. That is fixed now as well. Here is the code now as it should be: <CODE> <HTML> 2<META HTTP-EQUIV="Refresh" CONTENT=300> 3<HEAD><TITLE>Parallel Visual Exploring</TITLE></HEAD> 4 5 6 7<SCRIPT LANGUAGE="JavaScript"> 8 9// Animator internal variables 10 11var oldidxLeft = -1; 12var oldidxRight = -1; 13var isanimLeft = false; // Is animation on 14var isanimRight = false; 15var timerIDLeft = null; 16var timerIDRight = null; 17 18 19// Data size 20 21var nLeft; 22var nRight; 23 24// Preload all images for increased interactive speed 25 26pretimesoffLeft = new Array(); 27pretimesoffRight = new Array (); 28pretimesonLeft = new Array(); 29pretimesonRight = new Array(); 30preimagesLeft = new Array(); 31preimagesRight = new Array(); 32preplayLeft = new Array(); 33preplayRight = new Array(); 34 35function preloadLeft() 36{ 37 nLeft = filesLeft.length; // Initialize variable here 38 39 for(var i=0 ; i<nLeft ; i++) 40 { 41 var tmpLeft = timesLeft; 42 pretimesoffLeft = new Image(); 43 pretimesoffLeft.src = tbaseLeft+offcolor+tmpLeft+".png"; 44 pretimesonLeft = new Image(); 45 pretimesonLeft.src = tbaseLeft+oncolor+tmpLeft+".png"; 46 preimagesLeft = new Image(); 47 preimagesLeft.src = fbase+filesLeft; 48 } 49 preplayLeft[0] = new Image(); 50 preplayLeft[0].src = tbaseLeft+"button_play_cyan.png"; 51 preplayLeft[1] = new Image(); 52 preplayLeft[1].src = tbaseLeft+"button_stop_orange.png"; 53} 54 55function preloadRight() 56{ 57 nRight = filesRight.length; 58 59 for (var i=0 ; i<nRight ; i++) 60 { 61 var tmpRight = timesRight; 62 pretimesoffRight = new Image(); 63 pretimesoffRight.src = tbaseRight+offcolor+tmpRight+".png"; 64 pretimesonRight = new Image(); 65 pretimesonRight.src = tbaseRight+oncolor+tmpRight+".png"; 66 preimagesRight = new Image(); 67 preimagesRight.src = fbase+filesRight; 68 } 69 preplayRight[0] = new Image(); 70 preplayRight[0].src = tbaseRight+"button_play_cyan.png"; 71 preplayRight[1] = new Image(); 72 preplayRight[1].src = tbaseRight+"button_stop_oranssi.png"; 73} 74 75// Function to change to a new time and picture on left 76 77function showpngLeft(idxLeft,overLeft) { 78 79 if(idxLeft==oldidxLeft) return; 80 81 if(idxLeft == nLeft) 82 { 83 if(!isanimLeft) 84 { 85 isanimLeft = true; 86 timerIDLeft = setTimeout("doanimLeft()",delay); 87 } 88 document.images["imgLeft"+nLeft].src = preplayLeft[1].src; 89 } 90 else 91 { 92 if(overLeft) 93 { 94 document.images["imgLeft"+nLeft].src = preplayLeft[0].src; 95 if(timerIDLeft) clearTimeout(timerIDLeft); 96 isanimLeft = false; 97 } 98 if(oldidxLeft >= 0) 99 document.images["imgLeft"+oldidxLeft].src = pretimesoffLeft[oldidxLeft].src; 100 101 document.images["imgLeft"+idxLeft].src = pretimesonLeft[idxLeft].src; 102 document.images["predictionLeft"].src = preimagesLeft[idxLeft].src; 103 oldidxLeft = idxLeft; 104 } 105} 106 107// Function to change to a new time and picture on right 108 109function showpngRight(idxRight,overRight) { 110 111 if(idxRight==oldidxRight) return; 112 113 if(idxRight == nRight) 114 115 { 116 if(!isanimRight) 117 { 118 isanimRight = true; 119 timerIDRight = setTimeout("doanimRight()",delay); 120 } 121 document.images["imgRight"+nRight].src = preplayRight[1].src; 122 } 123 else 124 { 125 if(overRight) 126 { 127 document.images["imgRight"+nRight].src = preplayRight[0].src; 128 if(timerIDRight) clearTimeout(timerIDRight); 129 isanimRight= false; 130 } 131 if(oldidxRight >= 0) 132 document.images["imgRight"+oldidxRight].src = pretimesoffRight[oldidxRight].src; 133 134 document.images["imgRight"+idxRight].src = pretimesonRight[idxRight].src; 135 document.images["predictionRight"].src = preimagesRight[idxRight].src; 136 oldidxRight = idxRight; 137 } 138} 139 140function doanimLeft() { 141 if(!isanimLeft) return; 142 showpngLeft( (oldidxLeft+1) % nLeft , 0 ); 143 144 if(oldidxLeft+1==nLeft) 145 timerIDLeft = setTimeout("doanimLeft()",wrapdelay); 146 else 147 timerIDLeft = setTimeout("doanimLeft()",delay); 148} 149 150function doanimRight() { 151 152if (!isanimRight) return; 153 showpngRight( (oldidxRight+1) % nRight, 0); 154 155if(oldidxRight+1==nRight) 156 timerIDRight = setTimeout("doanimRight()",wrapdelay); 157 else 158 timerIDRight = setTimeout("doanimRight()",delay); 159} 160 161// Function called to setup the animation 162 163function restart() { 164 if(timerIDLeft) clearTimeout(timerIDLeft); 165 isanimLeft = false; 166 showpngLeft(0,1); 167// showgif(n-1,1); // last gif 168// showgif(n,1); // nth = PLAY 169 170 if(timerIDRight) clearTimeout(timerIDRight); 171 isanimRight = false; 172 showpngRight(0,1); 173 174} 175 176// Function to produce standard HTML body 177 178function makeAnimBodyLeft() 179{ 180// map legend 181 document.writeln('<TABLE BORDER=0 ALIGN=RIGHT>'); 182 document.writeln('<TR ALIGN=LEFT>'); 183 document.writeln('<TD><IMG ALIGN=LEFT BORDER=0 SRC="Legend.png" width="220" height="350"></TD>'); 184 document.writeln('</TR>'); 185 document.writeln('<TR ALIGN=LEFT><TD></TD>'); 186 document.writeln('</TR>'); 187 document.writeln('</TABLE>'); 188 189 190 191 document.writeln('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>'); 192 for(i=0 ; i<nLeft ; i++) { 193 var tmpLeft = timesLeft; 194 document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="showpngLeft('+i+',1)">'); 195 document.writeln('<IMG ALIGN=LEFT HSPACE=0 VSPACE=0 NAME="imgLeft'+i+'" SRC="'+pretimesoffLeft.src+'"></A>'); 196 document.writeln('</TD></TR>'); 197 } 198 document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="javascript:showpngLeft('+nLeft+',1)">'); 199 document.writeln('<IMG ALIGN=LEFT HSPACE=0 VSPACE=0 NAME="imgLeft'+nLeft+'" SRC="'+preplayLeft[0].src+'"></A></TD></TR>'); 200 document.writeln('</TABLE>'); 201 202 document.writeln('</TD><TD>'); 203 204 document.writeln('<TABLE BORDER=0 ALIGN=LEFT>'); 205 document.writeln('<TR ALIGN=LEFT>'); 206 document.writeln('<TD><IMG BORDER=1 NAME="predictionLeft" SRC="'+preimagesLeft[0].src+'width="320" height="430"></TD>'); 207 document.writeln('</TR>'); 208 document.writeln('<TR ALIGN=LEFT><TD></TD>'); 209 document.writeln('</TR>'); 210 document.writeln('</TABLE>'); 211 212 document.writeln('</TD><TD>'); 213 document.writeln('</TD></TR>'); 214 document.writeln('</TABLE>'); 215} 216 217function makeAnimBodyRight() 218{ 219 // For the map on the right hand site. 220 221 document.writeln('</TD></TR>'); 222 document.writeln('</TABLE>'); 223 document.writeln('<TABLE BORDER=0 ALIGN=LEFT>'); 224 document.writeln('<TR ALIGN=LEFT>'); 225 document.writeln('<TD><IMG BORDER=1 NAME="predictionRight" SRC="'+preimagesRight[0].src+'width="320" height="430"></TD>'); 226 document.writeln('</TR>'); 227 document.writeln('<TR ALIGN=LEFT><TD></TD>'); 228 document.writeln('</TR>'); 229 document.writeln('</TABLE>'); 230 231 document.writeln('</TD><TD>'); 232 document.writeln('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>'); 233 for(i=0 ; i<nRight ; i++) { 234 var tmpRight = timesRight; 235 document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="showpngRight('+i+',1)">'); 236 document.writeln('<IMG ALIGN=LEFT HSPACE=0 VSPACE=0 NAME="imgRight'+i+'" SRC="'+pretimesoffRight.src+'"></A>'); 237 document.writeln('</TD></TR>'); 238 } 239 document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="javascript:showpngRight('+nRight+',1)">'); 240 document.writeln('<IMG ALIGN=LEFT HSPACE=0 VSPACE=0 NAME="imgRight'+nRight+'" SRC="'+preplayRight[0].src+'"></A></TD></TR>'); 241 document.writeln('</TABLE>'); 242 243 document.writeln('</TD><TD>'); 244 245 246} 247 248// Animation settings 249 250var delay = 2000; //Animation speed 251var wrapdelay = 3000;// Wrap-around delay 252 253var tbaseLeft = "./ButtonsLeft/"; // Base name for time steps 254var tbaseRight = "./ButtonsRight/"; // Base name for time steps 255var fbase = "./"; // Base name for map files 256var oncolor = "red"; 257var offcolor = "blue"; 258 259 260var filesLeft = new Array( 261"aniframe_0015_1.jpg", "aniframe_0014_2.jpg", 262"aniframe_0013_3.jpg", "aniframe_0012_4.jpg", 263"aniframe_0011_5.jpg", "aniframe_0010_6.jpg", 264"aniframe_0009_7.jpg", "aniframe_0008_8.jpg", 265"aniframe_0007_9.jpg", "aniframe_0006_10.jpg", 266"aniframe_0005_11.jpg", "aniframe_0004_12.jpg", 267"aniframe_0003_13.jpg", "aniframe_0002_14.jpg", 268"aniframe_0001_15.jpg", "aniframe_0000_16.jpg"); 269 270var filesRight = new Array( 271"aniframe_0015_1.jpg", "aniframe_0014_2.jpg", 272"aniframe_0013_3.jpg", "aniframe_0012_4.jpg", 273"aniframe_0011_5.jpg", "aniframe_0010_6.jpg", 274"aniframe_0009_7.jpg", "aniframe_0008_8.jpg", 275"aniframe_0007_9.jpg", "aniframe_0006_10.jpg", 276"aniframe_0005_11.jpg", "aniframe_0004_12.jpg", 277"aniframe_0003_13.jpg", "aniframe_0002_14.jpg", 278"aniframe_0001_15.jpg", "aniframe_0000_16.jpg"); 279 280 281var timesLeft = new Array("+1stSummer","+1stSummer","+Winter","+2ndSummer","+Winter","+3rdSummer","+Winter","+4thSummer","+Winter","+5thSummer", 282"+Winter","+6thSummer","+Winter","+7thSummer","+Winter","+8thSummer"); 283 284var timesRight = new Array("+1stSummer","+1stSummer","+Winter","+2ndSummer","+Winter","+3rdSummer","+Winter","+4thSummer","+Winter","+5thSummer", 285"+Winter","+6thSummer","+Winter","+7thSummer","+Winter","+8thSummer"); 286 287preloadLeft(); // Must be after the SSI 288preloadRight(); 289 290</SCRIPT> 291 292</HEAD> 293 294<BODY BGCOLOR=white onLoad="restart()"> 295<CENTER> 296<H2><FONT COLOR=black>Illustration of Occurrence Probabilities of Colorado Beetle</FONT></H2> 297 298 299<!-- A HREF="_EuropeCD.html"><FONT COLOR="blue">Tulostussivu Z EuropeCD</FONT></A --> 300</CENTER> 301<BODY LINK=white VLINK=white ALINK=white> 302 303<SCRIPT LANGUAGE="JavaScript"><!-- 304makeAnimBodyLeft(); 305makeAnimBodyRight(); 306// --> 307</SCRIPT> 308 309</BODY> 310 311</HTML> </CODE>