Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    When animated gif is done, proceed to link

    I have an animated gif of a door opening on my site. The animated gif is triggered onclick. (It's triggered only when the user clicks on a certain part of the door, hence the image map). This is the current code:

    <img src="img/door_admin_static.gif" width="229" height=401"
    alt="admindoor" usemap="#admin" name="animate">
    <map name="admin">
    <area shape ="rect" coords ="65,165,236,501"
    onClick="document.images.animate.src='img/door_admin.gif';
    return true"
    href ="admin.html" target="_self" alt="admin" />
    </map>


    What is supposed to happen is that after the user clicks, the animation of the door opening runs, and then the user is taken to the page linked to that door (in this case, admin.html). As it is now, the user is taken immediately to the admin.html page, so they never get to see the animation run. I need some kind of code that makes it so that the user is taken to the admin.html only after the animation is complete.

    Any help would be greatly appreciated!!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Well, there's no event triggered by an animate GIF finishiing its animation. HTML is unaware that the GIF *is* animated.

    But if you can time the animation your self (say it takes 1.37 seconds to run?) you can do it:
    Code:
    <map name="admin">
    <area shape ="rect" coords ="65,165,236,501"
        onclick="document.images.animate.src='img/door_admin.gif';
                 setTimeout('location.href=\'admin.html\';',1370);return false"
        href ="admin.html" target="_self" alt="admin" />
    </map>
    I think that will work. The nice part is that, if JavaScript is disabled, then no animation happens and the user immediately goes to admin.html, so it still works. 1370 is of course 1370 milliseconds, 1.37 seconds.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for your reply!! That works perfectly in Safari. But Firefox is doing something crazy, it seems to be animating the gif AND keeping the static image of the door there at the same time. Do I need to state something in the onclick code to say to remove the static door image ("img/door_admin_static.gif"), while animating the gif?

    Here's the link if that helps:

    http://www.talmagecooley.com/doors.html

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    I think it is because the two images are different sizes!

    The static image is 300x525 pixels.
    The animated one is 229x401 pixels.

    You are resizing the static one to 229x401, but apparently FireFox messes up and tries to proportionately resize the smaller one, too, for some reason. Clearly a FireFox bug, but the answer is easy: Get out photoship and resize the large images to match the smaller ones.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh what a dumb error on my part! I had forgotten to resize the static images when we brought down the size on the gifs....

    Thank you so much!! You are a genius!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •