"complex" rollover animation question

Discussion in 'Javascript' started by Brian Angliss, Sep 11, 2003.

  1. 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
    Brian Angliss, Sep 11, 2003
    #1
    1. Advertising

  2. Brian Angliss

    DU Guest

    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/doctorunclear/Netscape7/Netscape7Section.html
    DU, Sep 11, 2003
    #2
    1. Advertising

  3. On Thu, 11 Sep 2003 01:07:58 -0400, DU <>
    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 = new Image();
    blogtv.src = bltv;
    }
    }

    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
    Brian Angliss, Sep 11, 2003
    #3
  4. Brian Angliss

    asdf asdf Guest

    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.magic)+")",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.Microsoft.MotionBlur(strength="+obj.val+")";
    window.setTimeout("doit('"+objid+"',"+dx+","+magicnum+")",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>
    asdf asdf, Sep 12, 2003
    #4
  5. 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, (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:
    Brian Angliss, Sep 14, 2003
    #5
  6. setTimeout problem; was 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, (asdf asdf) wrote:

    > window.setTimeout("doit('"+obj.id+"',5,"+(++obj.magic)+")",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
    Brian Angliss, Sep 20, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alberto.V

    Simple Animation Question

    Alberto.V, Dec 9, 2003, in forum: Java
    Replies:
    9
    Views:
    376
    Alberto.V
    Dec 11, 2003
  2. news.amnet.net.au
    Replies:
    1
    Views:
    556
    =?UTF-8?b?TMSByrtpZSBUZWNoaWU=?=
    Apr 13, 2004
  3. Stanimir Stamenkov
    Replies:
    2
    Views:
    732
    Stanimir Stamenkov
    Oct 25, 2005
  4. Robert Mark Bram
    Replies:
    0
    Views:
    670
    Robert Mark Bram
    Feb 4, 2007
  5. Kottiyath

    How complex is complex?

    Kottiyath, Mar 18, 2009, in forum: Python
    Replies:
    22
    Views:
    732
Loading...

Share This Page