On Thu, 11 Sep 2003 01:07:58 -0400, DU <dr*******@hotREMOVEmail.com>
wrote:
I know it's possible (even easy) to do rollover effects on 2 groups of
objects.
Without being able to see any code out of your post and no url, it's
extremely difficult to suggest anything concrete (furthermore if your
code is complex according to you)... just general not-too-commital
guesswork. Is your webpage markup syntax valid, validated?
DU
The following is how I'm pre-loading the animation images:
if (document.images) {
bltv=new Array();
bltv[0]="images/blogtv6.jpg";
bltv[1]="images/blogtv5.jpg";
bltv[2]="images/blogtv4.jpg";
bltv[3]="images/blogtv3.jpg";
bltv[4]="images/blogtv2.jpg";
bltv[5]="images/blogtv1.jpg";
bltv[6]="images/base_tv.jpg";
blogtv = new Array();
for (var i=0;i<bltv.length;i++){
blogtv[i] = new Image();
blogtv[i].src = bltv[i];
}
}
and
if (document.images) {
dytv=new Array();
dytv[0]="images/daytv6.jpg";
dytv[1]="images/daytv5.jpg";
dytv[2]="images/daytv4.jpg";
dytv[3]="images/daytv3.jpg";
dytv[4]="images/daytv2.jpg";
dytv[5]="images/daytv1.jpg";
dytv[6]="images/base_tv.jpg";
daytv = new Array();
for (var j=0;j<dytv.length;j++){
daytv[j] = new Image();
daytv[j].src = daytv[j];
}
}
The simple rollover function works just fine, but I can't get the two
animations to work properly. The code below is what i'm trying to get
working:
// blog
function aniOnb(imgName) {
clearTimeout(counter);
if (document.images) {
i--;
animOnb=eval("blogtv["+i+"].src");
document.tv.src=animOnb;
counter=setTimeout("aniOnb()",75);
if (i==0) clearTimeout(counter);
}
}
function aniOffb(imgName) {
clearTimeout(counter);
if (document.images) {
i++;
animOffb=eval("blogtv["+i+"].src");
document.tv.src=animOffb;
counter=setTimeout("aniOffb()",75);
if (i==6) clearTimeout(counter);
}
}
// dailies
function aniOnd(imgName) {
clearTimeout(counter);
if (document.images) {
j--;
animOnd=eval("daytv["+j+"].src");
document.tv.src=animOnd;
counter=setTimeout("aniOnd()",75);
if (j==0) clearTimeout(counter);
}
}
function aniOffd(imgName) {
clearTimeout(counter);
if (document.images) {
j++;
animOffd=eval("daytv["+j+"].src");
document.tv.src=animOffd;
counter=setTimeout("aniOffd()",75);
if (j==6) clearTimeout(counter);
}
}
And I'm calling the functions using the two following test lines of
markup:
<a href="a.htm" onMouseOver="butOn('but1');aniOnb();return true;"
onMouseOut="butOff('but1');aniOffb();return true;"><img
src="images/blog.jpg" width="135" height="40" name="but1"
border="0"></a>
<a href="a.htm" onMouseOver="butOn('but2');aniOnd();return true;"
onMouseOut="butOff('but2');aniOffd();return true;"><img
src="images/daily.jpg" width="135" height="40" name="but2"
border="0"></a>
I had originally tried to get things working with a single animation
function and found that I couldn't get it to work right. That code is
below:
function aniOn(imgName, animName) {
clearTimeout(counter);
if (document.images) {
i--;
animOn=eval(animName+"["+i+"].src");
document.tv.src=animOn;
counter=setTimeout("aniOn()",75);
if (i==0) clearTimeout(counter);
img_on=eval(imgName+"_on.src");
document [imgName].src=img_on;
}
}
function aniOff(imgName, animName) {
clearTimeout(counter);
if (document.images) {
i++;
animOff=eval(animName+"["+i+"].src");
document.tv.src=animOff;
counter=setTimeout("aniOff()",75);
if (i==6) clearTimeout(counter);
img_off=eval(imgName+"_off.src");
document [imgName].src=img_off;
}
}
I could get it working before I generalized
eval("name["+i+"].src")
to
eval(animName+"["+i+"].src")
It freaked out and started misbehaving in all sorts of ways. So now
I'm trying a brute-force approach with multiple functions.
I realized last night that if I move the mouse from button1 to
button2, the first animation doesn't complete and the animation hangs
at the step when I went over button2. I'll need to fix that too, but
I want to get the multiple animations working first. One thing at a
time.
Brian