Thread: Blue buttons should turn red
View Single Post
  #1 (permalink)  
Old Feb 5th, 2008, 07:01
javamama javamama is offline
New Member
Join Date: Feb 2008
Location: Finland
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Blue buttons should turn red
Hi,

The blue buttons on the left hand site of the web page should turn red when mouse is over them but instead the set of right hand buttons turn red. Why is that? How to get animation running for each set of maps?

HTML: Select all
<HTML>
<META HTTP-EQUIV="Refresh" CONTENT=300>
<HEAD><TITLE>Parallel Visual Exploring</TITLE></HEAD>



<SCRIPT LANGUAGE="JavaScript">

// 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();
pretimesoffRight = 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+offcolor+tmpLeft+".png";
    pretimesonLeft[i] = new Image();
    pretimesonLeft[i].src = tbaseLeft+oncolor+tmpLeft+".png";
    preimagesLeft[i] = new Image();
    preimagesLeft[i].src = fbase+files[i];
  }
  preplayLeft[0] = new Image();
  preplayLeft[0].src = tbaseLeft+"button_play_cyan.png";
  preplayLeft[1] = new Image();
  preplayLeft[1].src = tbaseLeft+"button_stop_orange.png";
}

function preloadRight()
{    
 n = files.length; 
   
   for (var i=0 ; i<n ; i++) 
   {
    var tmpRight = timesRight[i];
    pretimesoffRight[i] = new Image();
    pretimesoffRight[i].src = tbaseRight+offcolor+tmpRight+".png";
    pretimesonRight[i] = new Image();
    pretimesonRight[i].src = tbaseRight+oncolor+tmpRight+".png";
    preimagesRight[i] = new Image();
    preimagesRight[i].src = fbase+files[i];
  }
  preplayRight[0] = new Image();
  preplayRight[0].src = tbaseRight+"button_play_cyan.png";
  preplayRight[1] = new Image();
  preplayRight[1].src = tbaseRight+"button_stop_oranssi.png";
}

// Function to change to a new time and picture on left

function showpngLeft(idxLeft,overLeft) {

  if(idxLeft==oldidxLeft) return;

  if(idxLeft == n)
  {
     if(!isanimLeft)
     {
       isanimLeft = true;
       timerIDLeft = setTimeout("doanimLeft()",delay);
     }
     document.images["img"+n].src = preplayLeft[1].src;
  }
  else
  {
    if(overLeft)
    {
      document.images["img"+n].src = preplayLeft[0].src;
      if(timerIDLeft) clearTimeout(timerIDLeft);
      isanimLeft = false;
    }
    if(oldidxLeft >= 0)
       document.images["img"+oldidxLeft].src = pretimesoffLeft[oldidxLeft].src;

    document.images["img"+idxLeft].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(idxRight,overRight) {

  if(idxRight==oldidxRight) return;

  if(idxRight == n)
  
  {
     if(!isanimRight)
     {
       isanimRight = true;
       timerIDRight = setTimeout("doanimRight()",delay);
     }
     document.images["img"+nRight].src = preplayRight[1].src;
  }
  else
  {
    if(overRight)
    {
      document.images["img"+n].src = preplayRight[0].src;
      if(timerIDRight) clearTimeout(timerIDRight);
      isanimRight= false;
    }
    if(oldidxRight >= 0)
       document.images["img"+oldidxRight].src = pretimesoffRight[oldidxRight].src;

    document.images["img"+idxRight].src = pretimesonRight[idxRight].src; 
    document.images["predictionRight"].src = preimagesRight[idxRight].src;
    oldidxRight = idxRight;
  }
}

function doAnimLeft() {
  if(!isanimLeft) return;
      showpngLeft( (oldidxLeft+1) % n , 0 );
      
  if(oldidxLeft+1==n)
     timerIDLeft = setTimeout("doanimLeft()",wrapdelay);
  else
     timerIDLeft = setTimeout("doanimLeft()",delay);
}

function doAnimRight() {

if (!isanimRight) return;
    showpngRight( (oldidxRight+1) % n, 0);

if(oldidxRight+1==n)
      timerIDRight = setTimeout("doanimRight()",wrapdelay);
  else 
      timerIDRight = setTimeout("doanimRight()",delay);
}

// Function called to setup the animation

function restart() {
  if(timerIDLeft) clearTimeout(timerIDLeft);
    isanimLeft = false;
    showpngLeft(0,1);
// showgif(n-1,1);  // last gif
// showgif(n,1);  // nth = PLAY

  if(timerIDRight) clearTimeout(timerIDRight);
      isanimRight = false;
    showpngRight(0,1);

}

// Function to produce standard HTML body

function makeAnimBodyLeft()
{
  document.writeln('<TABLE BORDER=0 ALIGN=LEFT>');
  document.writeln('<TR><TD>');

  document.writeln('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>');
  for(i=0 ; i<n ; i++) {
    var tmpLeft = timesLeft[i];
    document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="showpngLeft('+i+',1)">');
    document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+i+'" SRC="'+pretimesoffLeft[i].src+'"></A>');
    document.writeln('</TD></TR>');
  }
  document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="javascript:showpngLeft('+n+',1)">');
  document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+n+'" SRC="'+preplayLeft[0].src+'"></A></TD></TR>');
  document.writeln('</TABLE>');

  document.writeln('</TD><TD>');

  document.writeln('<TABLE BORDER=0 ALIGN=CENTER>');
  document.writeln('<TR ALIGN=LEFT>');
  document.writeln('<TD><IMG BORDER=1 NAME="predictionLeft" SRC="'+preimagesLeft[0].src+'"></TD>');
  document.writeln('</TR>');
  document.writeln('<TR ALIGN=CENTER><TD></TD>');
  document.writeln('</TR>');
  document.writeln('</TABLE>');
  
  document.writeln('</TD><TD>');
  document.writeln('</TD></TR>');
  document.writeln('</TABLE>');
}

function makeAnimBodyRight()
{  
  // For the map on the right hand site. 
  document.writeln('<TABLE BORDER=0 ALIGN=LEFT>');
  document.writeln('<TR><TD>');

  document.writeln('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>');
  for(i=0 ; i<n ; i++) {
    var tmpRight = timesRight[i];
    document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="showpngRight('+i+',1)">');
    document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+i+'" SRC="'+pretimesoffRight[i].src+'"></A>');
    document.writeln('</TD></TR>');
  }
  document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="javascript:showpngRight('+n+',1)">');
  document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+n+'" SRC="'+preplayRight[0].src+'"></A></TD></TR>');
  document.writeln('</TABLE>');

  document.writeln('</TD><TD>');

  document.writeln('<TABLE BORDER=0 ALIGN=CENTER>');
  document.writeln('<TR ALIGN=LEFT>');
  document.writeln('<TD><IMG BORDER=1 NAME="predictionRight" SRC="'+preimagesRight[0].src+'"></TD>');
  document.writeln('</TR>');
  document.writeln('<TR ALIGN=CENTER><TD></TD>');
  document.writeln('</TR>');
  document.writeln('</TABLE>');
  
  document.writeln('</TD><TD>');
  
  
  // map legend 
  document.writeln('<TABLE BORDER=0 ALIGN=CENTER>');
  document.writeln('<TR ALIGN=LEFT>');
  document.writeln('<TD><IMG BORDER=0 SRC="Legend.png" width="349" height="420"></TD>');
  document.writeln('</TR>');
  document.writeln('<TR ALIGN=CENTER><TD></TD>');
  document.writeln('</TR>');
  document.writeln('</TABLE>');

  document.writeln('</TD></TR>');
  document.writeln('</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("+1stSummer","+1stSummer","+Winter","+2ndSummer","+Winter","+3rdSummer","+Winter","+4thSummer","+Winter","+5thSummer",
"+Winter","+6thSummer","+Winter","+7thSummer","+Winter","+8thSummer");

var timesRight = new Array("+1stSummer","+1stSummer","+Winter","+2ndSummer","+Winter","+3rdSummer","+Winter","+4thSummer","+Winter","+5thSummer",
"+Winter","+6thSummer","+Winter","+7thSummer","+Winter","+8thSummer");

preloadLeft();      // Must be after the SSI
preloadRight();

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white onLoad="restart()">
<CENTER>
<H2><FONT COLOR=black>Compare Occurrence Probabilities of Colorado Beetle</FONT></H2>


<!-- A HREF="_EuropeCD.html"><FONT COLOR="blue">Tulostussivu Z EuropeCD</FONT></A -->
</CENTER>
<BODY LINK=white VLINK=white ALINK=white>

<SCRIPT LANGUAGE="JavaScript"><!--
makeAnimBodyLeft();
makeAnimBodyRight();
// -->
</SCRIPT>



<NOSCRIPT>
Sivu vaatii v&auml;hint&auml;&auml;n Netscape 4.0 tai Internet Explorer 4.0
selaimen, ja ett&auml; JavaScript on p&auml;&auml;ll&auml;.
</NOSCRIPT>

</BODY>

</HTML>
Last edited by c010depunkk; Feb 5th, 2008 at 07:27. Reason: please use [HTML] tags when posting HTML
Reply With Quote