run animated gif when link is clicked

Repatilian · 05-30-2012, 02:01 AM

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.

xelawho · 05-30-2012, 05:02 AM

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

felgall · 05-30-2012, 10:05 AM

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.

VIPStephan · 05-30-2012, 12:47 PM

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.

Repatilian · 05-30-2012, 07:12 PM

ok i added this.

Code:

<div  ><a href="aboutus.htm" onclick="button/paintsplat.gif" id="aboutimg_anchor"  ><img width="60%" id="aboutimg"   border="0" src="button/about-us-01.png"></a></div>

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.

xelawho · 05-30-2012, 07:34 PM

the onclick needs the id of the element that it is looking to change - it really should be in a function, but you can do it like this:

Code:

<a href="aboutus.htm" onclick="document.getElementById('aboutimg').src='button/paintsplat.gif'" id="aboutimg_anchor"  >

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.

Repatilian · 05-30-2012, 07:58 PM

ok i know this sounds dumb but i don't know how to do that. can you help me set the timeout?

xelawho · 05-30-2012, 08:31 PM

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):

Code:

<body>
<img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onclick="changePic(this)"></img>
<script type="text/javascript">
function changePic(pic){
pic.src='button/paintsplat.gif'
setTimeout(function(){location.href="aboutus.htm"},1000)
}
</script>
</body>

VIPStephan · 05-30-2012, 09:03 PM

Quote:

Originally Posted by iBall

what's wrong with using animated gif's. They're easy to make and I use them mainly as animated icons like for example "Loading...." animated icons.

Nothing is wrong with them. I just proposed another alternative for a simple animation – which has the advantage of being stoppable at any point if necessary.

Repatilian · 05-30-2012, 09:32 PM

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.

Repatilian · 05-30-2012, 09:34 PM

maybe you could put the mouseover image in the code you gave me?

Repatilian · 05-30-2012, 10:02 PM

would an onmouseover command work? I'm not sure where i would put it.

Repatilian · 05-30-2012, 10:06 PM

i tried to change it to this but it didn't work.

Code:

     <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onmouseover="changepic(2)" onclick="changePic(this)"></img>
<script type="text/javascript">
function changePic(pic){
pic.src='button/paintsplat.gif'
setTimeout(function(){location.href="aboutus.htm"},1000)
}
</script>

<script type="text/javascript">
function changePic(2){
pic.src='button/about-us-02.png'
}
</script>

Repatilian · 05-30-2012, 10:56 PM

i really don't care if i use jquery or not

xelawho · 05-31-2012, 02:10 AM

Quote:

Originally Posted by Repatilian

i tried to change it to this but it didn't work.

Code:

     <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onmouseover="changepic(2)" onclick="changePic(this)"></img>
<script type="text/javascript">
function changePic(pic){
pic.src='button/paintsplat.gif'
setTimeout(function(){location.href="aboutus.htm"},1000)
}
</script>

<script type="text/javascript">
function changePic(2){
pic.src='button/about-us-02.png'
}
</script>

close - the onmouseover works the same as the onclick, by passing "this" (which here refers to the image) to the function, but bear in mind that your functions need unique names or else they overwrite the previous one, and that javascript is case sensitive:

Code:

     <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onmouseover="changePic2(this)" onclick="changePic(this)"></img>
<script type="text/javascript">
function changePic(pic){
pic.src='button/paintsplat.gif';
setTimeout(function(){location.href="aboutus.htm"},1000);
}
</script>

<script type="text/javascript">
function changePic2(pic){
pic.src='button/about-us-02.png';
}
</script>

then you probably want a function to return the image to the original onmouseout IF it hasn't been clicked on...

Code:

function changePic3(pic){
if(pic.src=='button/about-us-02.png'){
pic.src="button/about-us-01.png";
    }
}

you're right - there's no need for jQuery in any of this...