Search code examples
imagegifanimated-gif

Is there a way to create an image that flips to another side (another page) when tapped or clicked?


A user has a business card with two sides. It has the front side with primary information and the backside with secondary details. She wants that when she sends her business card to her contacts, they should see the front side of it only. And after clicking on it, it should flip to another side. The image should just be a gif or any other image format independent of any program.

All I can think of creating a gif which after an interval changes to the other side which does not fulfill her requirement of changing only when clicked.

I thought of ImageMap with hotspots but that too will require linking the other side (page) on the web which defies the independence of the image.

Any help in this regard is highly appreciated.


Solution

  • The GIF89a standard (the one we use today) includes the so-called User Input flag that was designed exactly for this.
    That flag, being set on a certain frame, should tell a GIF decoder not to show the next frame until either the timeout expires or the user interacts with the current one.
    Zero timeout coupled with nonzero User Input means that the decoder should wait for an interaction indefinitely.

    Quote from the standard:

            v) User Input Flag - Indicates whether or not user input is
            expected before continuing. If the flag is set, processing will
            continue when user input is entered. The nature of the User input
            is determined by the application (Carriage Return, Mouse Button
            Click, etc.).
    
            Values :    0 -   User input is not expected.
                        1 -   User input is expected.
    
            When a Delay Time is used and the User Input Flag is set,
            processing will continue when user input is received or when the
            delay time expires, whichever occurs first.
    

    Unfortunately, no GIF decoders I know of even bother to handle this flag properly — so I guess your best bet is to give both frames reasonable timeouts, 10±5 seconds or so.