By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,446 Members | 3,031 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,446 IT Pros & Developers. It's quick & easy.

LeftHandButtons should turn red(on) but stay blue(off) when mouse on

P: 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>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","+2ndSum mer","+Winter", "+3rdSummer","+Winter","+4thSummer","+Winter","+5t hSummer",
"+Winter","+6thSummer","+Winter","+7thSummer","+Wi nter","+8thSummer");

var timesRight = new Array("+1stSummer","+1stSummer","+Winter","+2ndSum mer","+Winter", "+3rdSummer","+Winter","+4thSummer","+Winter","+5t hSummer",
"+Winter","+6thSummer","+Winter","+7thSummer","+Wi nter","+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>[/HTML]
Feb 4 '08 #1
Share this Question
Share on Google+
2 Replies


epots9
Expert 100+
P: 1,351
Moved to the Javascript Forums where the resident experts can better assist you. Also please remember to use code tags.

**Moved from Programming Challenges.
Feb 4 '08 #2

gits
Expert Mod 5K+
P: 5,333
... merged threads ...

kind regards
MODERATOR
Feb 4 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.