View Full Version : How to run a gif animation and random image function from an html button onclick?

08-25-2010, 05:07 PM
Trying to click (onClick) an animated gif image of an on/off switch to start a second animation which is located on a different location on the web-page (a 7-frame animation of a generator with moving parts) immediately followed by a random image selection function placing an image in a 3rd location on the page (next to the generator image). The random images are supposed to look like the result of the generator animation---the item that “pops out” of the generator.

We thought the process to achieve this would be an “OnClick” on the on/off switch-animated-gif to start two javascript functions (generato animation function & random image function).

To further complicate matters, we are doing this website in iWeb. We’re using iWeb SEO Tool to add the javascript to the header and HTML snippet in iWeb to place the HTML code. Not sure we’re actually doing the snippet right though---is it supposed to relate to the images---or is it separate? When the gifs are place on the iweb page, they work in the browser upon page load---the “on-click” & the random image function are NOT working...so we know we’ve done something(s) wrong.

We’re thinking that we’re probably missing some code that describes where the 3 different image-spots are on the page (image #1 is the on/off switch gif, image#2 is the generator gif, image#3 is the generator output.png)....or just aren’t coding the string of functions correctly---or maybe our strategy for achieving this is just no correct (?).

Here is the code we have tried that didn’t work. We desperately need a solution quickly and are open to any/other ideas for how to accomplish this. THANKS YOU in advance for your help!!!:

script language = JAVASCRIPT>
<!-- Hide script from old browsers

function gif_animation(){
if (document.images)
generator = new Image
generator_on = new Image

generator.src = "christmas_sweater_generator-offswitch.gif"
generator_on.src = "christmas_sweater_generator_on-offswitch.gif"
// Stop hiding script from older browsers -->

Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish

<!--//specify corresponding links below
var imagelinks=new Array()

var ry=Math.floor(Math.random()*myimages.length)

if (ry==0)
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')


<!--the HTML:

<a href="#" onclick="function gif_animation(); function random_imglink();">
<img src="christmas_sweater_GENERATOR_files/christmas_sweater_generator-on-off.gif" width="100" height="200" alt="on-off" /></a>


Old Pedant
08-25-2010, 11:32 PM
You can't call document.write after a page loads. If you do, you *WIPE OUT* the ENTIRE HTML page (along with all the JavaScript). So when you call random_imglink() from the onclick, you are wiping out the page. But that probably doesn't matter, because you are *ALSO* causing the page to be reloaded, as you are not suppressing the normal action of the <a>.

Your random image code is also broken. You'll never choose image 4 with that code.

Your gif_animation() function looks like it will work. But it will never do anything visibile. All it does is load the two images into variables in JavaScript, so they never appear on the page.

Do this:

Use HTML to get the three images into the places you want them on the page. Use NO JAVASCRIPT WHATSOEVER. When you are happy with the appearance, *THEN* come back and show us the HTML code and ask the question again. Yes, I know you don't want those images to all appear on page load. But *start* from that. It's much easier to start from that then the way you have started.

08-27-2010, 11:21 PM
Hi, This is Mrs. Duckinator! In an effort to find a solution, I've SIMPLIFIED the design/process. The new, simpler challenge is this:

Click on an IMAGE in cell #1 in a table to start an animation (7 frames) immediately followed by a random image being placed in cell#2 in the same table.

I had a couple ideas for how this might be accomplished, but not sure how to do either/or which one is better/easier.

Idea#1: Just create ONE larg animation that starts with an onClick and the last frame is "randomly" generated in order to achieve the random "output" of the generator action.

Idea #2: Figure out how to code javascript functions (that actually work!:eek:) and the corresponding HTML and use on onClick item like this to call both:

element.onclick = function () {function animate( ); function random_img()}

Per your request, here is some basic code placing the items on a page ---with NO javascript:

Since I'mbuilding this site in iWeb, I can't see the code to copy it, but I believe this represents the layout of the area in question:

<table width="734" height="579">
<td width="403" height="579">
<img src="christmas_sweater_GENERATOR_files/christmas-sweater-generator-static.gif" alt="" />

<td width="331" height="579" align="left"><christmas_sweater_GENERATOR_files/img src="cotton-candy-christmas-sweater.png" alt=""</td>

...I have an image I can show you of what the two images are/how they relate to eachother....but, unfortunately,I don't understand how to share the here as it only lets me share via a URL (?)

THANKS IN ADVANCE!!!! I hope this is EASY for someone smart/skilled :)

Old Pedant
08-27-2010, 11:43 PM
Since I'mbuilding this site in iWeb, I can't see the code to copy it,

Sure you can! View the page in your browser. Then click on the VIEW menu. Then click on the SOURCE (or PAGE SOURCE) menu item. Voila! There's the HTML for the page.


Ummm....I thought you said there were THREE images???

Do you mean that the animated GIF *replaces* that static one upon click?

Also: There's no way to detect when an animated GIF reaches the end of its animation. The best you can do is time it as close as you can and then use a delay of the same length before plopping that other image in place. If you have multiple animations with multiple time lengths, you'll need to time each one and make a table of them by name and timing in JS code in order to get the effect to work correctly.

Old Pedant
08-27-2010, 11:45 PM
p.s: Yes, this will be easy once we get the details worked out.