Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > "complex" rollover animation question

Reply
Thread Tools

"complex" rollover animation question

 
 
Brian Angliss
Guest
Posts: n/a
 
      09-11-2003
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
 
Reply With Quote
 
 
 
 
DU
Guest
Posts: n/a
 
      09-11-2003
Brian Angliss wrote:

> 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


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

 
Reply With Quote
 
 
 
 
Brian Angliss
Guest
Posts: n/a
 
      09-11-2003
On Thu, 11 Sep 2003 01:07:58 -0400, DU <(E-Mail Removed)>
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
 
Reply With Quote
 
asdf asdf
Guest
Posts: n/a
 
      09-12-2003
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="progidXImageTransform.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>
 
Reply With Quote
 
Brian Angliss
Guest
Posts: n/a
 
      09-14-2003
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, http://www.velocityreviews.com/forums/(E-Mail Removed) (asdf asdf) wrote:

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


 
Reply With Quote
 
Brian Angliss
Guest
Posts: n/a
 
      09-20-2003
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, (E-Mail Removed) (asdf asdf) wrote:

> window.setTimeout("doit('"+obj.id+"',5,"+(++obj.ma gic)+")",1);


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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
simple animation question (I hope) John Doe Java 7 11-19-2006 06:57 PM
Spider Man Animation Question Herbie Garcia DVD Video 2 07-03-2004 07:36 PM
Login "rollover" button question VB Programmer ASP .Net 0 06-09-2004 12:54 PM
Rollover graphics question whenindoubt Computer Support 2 02-14-2004 05:25 PM
Simple Animation Question Alberto.V Java 9 12-11-2003 07:10 AM



Advertisments