"complex" rollover animation question

I'm relatively new to scripting in JavaScript, so I'm not too
surprised I'm having difficulty scripting up an animation effect for
my personal site.

What I'm trying to do is the following: When I go onMouseOver on a
button in a nav bar, I want that button to switch to a different image
while at the same time another blank image changes as an animation to
an associated image. When I go onMouseOut, the bar image reverts back
to the original and the blank area image steps back through the
animation to the original, blank image.

I can get this to work for a single nav bar button, but when I attempt
to generalize the functions to work for the second nav bar button (and
a second, different animation that occurs in the same blank area), it
fails.

I can get the second nav button to work correctly on rollover by
splitting the simple rollover function out from the animation
function, but I cannot get the second animation to work regardless.

Any suggestions on how I might solve this problem? I can post code if
necessary.

Thanks a lot.

Brian

re: "complex" rollover animation question

Brian Angliss wrote:
[color=blue]
> I'm relatively new to scripting in JavaScript, so I'm not too
> surprised I'm having difficulty scripting up an animation effect for
> my personal site.
>
> What I'm trying to do is the following: When I go onMouseOver on a
> button in a nav bar, I want that button to switch to a different image
> while at the same time another blank image changes as an animation to
> an associated image. When I go onMouseOut, the bar image reverts back
> to the original and the blank area image steps back through the
> animation to the original, blank image.
>
> I can get this to work for a single nav bar button, but when I attempt
> to generalize the functions to work for the second nav bar button (and
> a second, different animation that occurs in the same blank area), it
> fails.
>
> I can get the second nav button to work correctly on rollover by
> splitting the simple rollover function out from the animation
> function, but I cannot get the second animation to work regardless.
>
> Any suggestions on how I might solve this problem? I can post code if
> necessary.
>
> Thanks a lot.
>
> Brian[/color]

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
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

re: "complex" rollover animation question

On Thu, 11 Sep 2003 01:07:58 -0400, DU <drunclear@hotREMOVEmail.com>
wrote:
[color=blue]
>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[/color]

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

re: "complex" rollover animation question

Hello, here is something that I threw together (hence its crappiness)
that I think demonstrates some of the things you are trying to do:


<script>
function howdy() {
var obj = event.srcElement;
if (!obj.magic) return;
window.setTimeout("doit('"+obj.id+"',5,"+(++obj.ma gic)+")",1);
}
function unhowdy() {
var obj = event.srcElement;
if (!obj.magic) return;
window.setTimeout("doit('"+obj.id+"',-5,"+(++obj.magic)+")",1);
}
function doit(objid,dx,magicnum) {
var obj = document.getElementById(objid);
if (!obj || magicnum!=obj.magic) return;
if (!obj.val) obj.val = 0;
obj.val += dx;
if (obj.val < 0) {
obj.val = null;
obj.style.filter=null;
} else if (obj.val<50) {
obj.style.filter="progid:DXImageTransform.Microsof t.MotionBlur(strength="+obj.val+")";
window.setTimeout("doit('"+objid+"',"+dx+","+magic num+")",10);
}
}
</script>
<body onmouseover="howdy()" onmouseout="unhowdy()">
<img magic=1 id=but1 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but2 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but3 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but4 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but5 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but6 src="http://www.google.com/images/logo.gif"><br>
</body>

re: "complex" rollover animation question

Thanks a lot for the suggested code. I'll give it a shot and see if I
can make it work.

Brian

On 11 Sep 2003 17:54:17 -0700, b0b0b0b@yahoo.com (asdf asdf) wrote:
[color=blue]
>Hello, here is something that I threw together (hence its crappiness)
>that I think demonstrates some of the things you are trying to do:[/color]

re: "complex" rollover animation question

I'm trying to get your example working, and I'm getting errors on the
setTimeout of howdy()

On 11 Sep 2003 17:54:17 -0700, b0b0b0b@yahoo.com (asdf asdf) wrote:
[color=blue]
> window.setTimeout("doit('"+obj.id+"',5,"+(++obj.ma gic)+")",1);[/color]

Basically, the JS Console in Navigator 7.0x says that the above
statement is "missing a ')' after the argument list" I don't see
where - any suggestions why it's freaking out?

Thanks for your help.

Brian