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
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

    [CODE]
    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
    myimages[1]="christmas_sweater_GENERATOR_files/cotton_candy_christmas_sweater.png"
    myimages[2]="christmas_sweater_GENERATOR_files/eiffel_tower_christmas_sweater.png"
    myimages[3]="christmas_sweater_GENERATOR_files/kitty_litter_christmas_sweater.png"
    myimages[4]="christmas_sweater_GENERATOR_files/spatula_christmas_sweater.png"

    <!--//specify corresponding links below
    var imagelinks=new Array()
    imagelinks[1]="#http://www.christmassweaterfun.com/christmas_sweater_GENERATOR"
    imagelinks[2]="#http://www.christmassweaterfun.com/christmas_sweater_GENERATOR"
    imagelinks[3]="#http://www.christmassweaterfun.com/christmas_sweater_GENERATOR"
    imagelinks[4]="#http://www.christmassweaterfun.com/christmas_sweater_GENERATOR"
    -->

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

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


    random_imglink()
    //-->
    </script>

    <!--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>

    [CODE]

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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.
    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
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Updated request-Duckinator

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

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

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

    ...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
    Trisha

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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.
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    p.s: Yes, this will be easy once we get the details worked out.
    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.


  •  

    Posting Permissions

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