Hi, i was wondering how i could get an animated gif to play once a link is clicked. My site is www.marksbodyshop.org I want an animation to run before redirecting the page. My rollovers are done in jquery. If anyone has any ideas or if anyone wants to see more of my code let me know. I know you could use the animate function and complete function to call a redirect but i don't know how to do that. thank you.
you can't (as far as I know) stop`an animated gif from animating - the best you can do is to save a separate file with the image that you want in a static state, show that on page load, then swap the image source to the animated gif onclick
All you need is an image swap script that swaps the first static image for the second animated one. Image swap scripts are one of the most common scripts there is as there were even versions that worked in Netscape 2. You should have no trouble finding one - or simply follow iBall's instructions to create your own.
What you can do as well is scrap the animated GIF completely and create the animation using an image sprite as background of an element and changing class names of that element sequentially with JS (imitating film frames) with each class having one specific background position in the CSS.
my buttons work with jquery. I'm not really sure how to code it. The buttons are also in a div with the id position. The position element is in my defult.css and defult2.css files so it will work in all browsers.
but as soon as someone clicks the "aboutus" link, they will be taken to that page and so not see the image changing. If you want to the image to run for a while beforehand it would be best to have the onclick call a function which swaps the image source then sets a timeout, making a pause before redirect.
if I understand correctly you can do away with the <a> tag and just operate everything from the onclick on the image. let me know if I'm mistaken (timeout is in milliseconds, so 1000 means 1 second - adjust to suit):
ok that worked perfectly but i don't think it's using the jquery for the three state rollover. i don't care if the mousedown function is used. It would be cool, but i really only need the mouseover. I think you would probably put the id to point at the jquery but i'm not sure. i think the id is aboutimg_anchor. thank you so much for helping me out.all i really need is the mouse down which is about-us-02.png.