blue buttons should turn red when cursor on them

April90 · Feb 4, 2008

Hi,

I coded a web page with two set of maps. Left and right map has their own blue/red buttons which should turn from blue to red when the mouse is over them. The left set of buttons stay blue even mouse over. What's the problem? The play function(animate) doesn't work either.
<CODE>
<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>


</CENTER>
<BODY LINK=white VLINK=white ALINK=white>

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

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

</BODY>

</HTML>
</CODE>

BabyJeffy · Feb 5, 2008

What browser are you using to make this code work on? Try using Firefox (with the Firebug extension) - this invariably points to the problem if it is Javascript related (which it very well could be).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

April90 · Feb 6, 2008

Thanks, BabyJeffy

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
300</CENTER>
301<BODY LINK=white VLINK=white ALINK=white>
302
303<SCRIPT LANGUAGE="JavaScript">
307</SCRIPT>
308
309</BODY>
310
311</HTML> </CODE>

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!

blue buttons should turn red when cursor on them

April90

Technical User

BabyJeffy

Programmer

April90

Technical User

Similar threads

Part and Inventory Search

Sponsor