Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

blue buttons should turn red when cursor on them

Status
Not open for further replies.
April90

April90

Technical User
Feb 4, 2008
3
FI
Hi,

The code below makes left buttons with left map and right buttons for right map. When the mouse is on the button the button should turn red. It happens for the right buttons but not for the left ones. Instead the right hand buttons turn red even they shouldn't. Where is the problem?

<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;
pretimesoffLeft = new Image();
pretimesoffLeft.src = tbaseLeft+offcolor+tmpLeft+".png";
pretimesonLeft = new Image();
pretimesonLeft.src = tbaseLeft+oncolor+tmpLeft+".png";
preimagesLeft = new Image();
preimagesLeft.src = fbase+files;
}
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;
pretimesoffRight = new Image();
pretimesoffRight.src = tbaseRight+offcolor+tmpRight+".png";
pretimesonRight = new Image();
pretimesonRight.src = tbaseRight+oncolor+tmpRight+".png";
preimagesRight = new Image();
preimagesRight.src = fbase+files;
}
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;
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.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;
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.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>

 
Sort by date Sort by votes
I suspected you'd get a better response in forum216
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

xwb
  • Locked
  • Question
Browse on ipad just using bluetooth
Replies
8
Views
159
ChrisHirst
ChrisHirst
goombawaho
  • Locked
  • Question
Error in IE11 on Windows 10
Replies
3
Views
125
goombawaho
goombawaho
xwb
  • Locked
  • Question
Pepperflash 23 on chrome
Replies
1
Views
101
ChrisHirst
ChrisHirst
guitarzan
  • Locked
  • Question
Firefox crashes when playing video from websites
Replies
9
Views
131
goombawaho
goombawaho
azpghnoclj
  • Locked
  • Question
Hsrd yahoo redirect Malware or Homeland Security Redirect
Replies
3
Views
101
Sympology
Sympology

Part and Inventory Search

Sponsor

Back
Top