If I give a GIF will I get flash or java?

March 6, 2009 11:50 AM

[Website development filter] I have developed a site for a client. He wanted something that shows a picture with text that changes every few seconds so I created a GIF that does this. Now he says that he wants it to pause on mouseover or a click. How do I do this?

The site in question is VERY simple. (it is 6 small pages written as one file in PHP with a switch statement)
The GIF is in the sidebar and shows 5 different pictures, each with some associated text. It flips to new picture and text every 10 seconds.
He wants to be able to pause it with the mouse.

I am a real newbie web developer (but a C programmer by profession).
I think that this could be done in FLASH, but I sure don't know enough.
Maybe it could be done in javascript, but I sure don't know enough.

I would need a solid enough example that I could just "plug in" the pictures and text to achieve the desires result and upload it.

[I have not posted a link to the site because I don't want to be banned or have my question deleted.]

posted by Drasher to computers & internet (10 answers total)

It can be done very, very quickly and easily with javascript. Google javascript image rollover or mouseover. You should do the image rotation with javascript, too, instead of a .gif, then it would be simpler to just delay the next image change... Change images every ten seconds unless someone is hovering with a mouse on it, that is. Getting started with javascript is vey easy, it shouldn't take you all that long to figure it out yourself.
posted by halogen at 11:56 AM on March 6, 2009

This is a job for Javascript.

I could be wrong (and often am), but I don't think you can stop animation of a GIF via Javascript.

So what you're looking for is loading the animated GIF as a base image. This is what users without Javascript will get. Then, load your five static images up and switch to the next one via a timer event. This will have to be in a layer above the animated GIF, or you must simply replace the animated GIF. So, now once every two seconds (2000 milliseconds) or whatever you program it to be, in milliseconds, you switch.

Finally, you will attach to your static image onmouseover and onmouseout events. The first event triggers when the mouse hovers over the image, the second triggers when the mouse leaves the image.

For the first event, you'll want to disable the timer that does the switching.

For the second event, you'll want to re-enable (or recreate) the timer that does the switching.
posted by adipocere at 12:00 PM on March 6, 2009

You can use a JavaScript such as this: Ultimate Fade-in slideshow (v1.51).

Very easy to customize and implement!
posted by ascetic at 12:34 PM on March 6, 2009

Yeah -- animated GIF is the wrong approach for this. And Flash would be overkill.

One javascript approach:

Put each of your five images and their text in separate <div>s each with its own unique ID attribute.

Use jQuery to hide all but the first div (using $('foo').style.display='none') and start a timer that will cycle through them all every ten seconds (using setTimeout to trigger a function that will hide the current div and make the next one visible). If you want to get fancy you can use the fadeIn and fadeOut effects, or you can just toggle the display of each one by setting the display to 'block' or 'none' as needed.

Add an onclick event handler to the page that will interrupt the timer.

If you're already a programmer, you should have no trouble figuring out the details; jQuery is very well documented and this isn't a complex problem.
posted by ook at 1:09 PM on March 6, 2009

Urgh, I've been doing another project where I'm forced to use YUI instead of jQuery, so I mangled the syntax: not $('foo').style.display='none'; instead that should be $('foo').css('display','none'). Sorry for the goofup.
posted by ook at 1:14 PM on March 6, 2009

adipocere writes "For the second event, you'll want to re-enable (or recreate) the timer that does the switching."

Allow me to quibble slightly.

Sounds like you're over-complicating things. Once the timer is functioning (and in javascript, I believe this means it fires a function that creates the next timer, then does whatever), have it simply observe two flags, which flags are toggled by mouseover and click.

pseudo-code:

on_load:
pic_clicked = false;
mouse_in_pic = false ;
make_new_timer();

on_mouseover: mouse_in_pic = true;
on_mouseout: mouse_in_pc = false ;
on_click: pic_clicked = !clicked;

on_timer:
make_new_timer();
if( ! mouse_in_pic && ! pic_clicked ) // apply De Morgan's rule as it suits you
next_pic();

Of course, in real life you'd encapsulate this by making the variables and functions members of some object, but this seems cleaner code: you always have the timer loop running, it just doesn't do anything if either flag is set.

It's a subtle difference, but the advantage of this is less coupling: the events don't need to know anything about the timer, or even if it exists. They just set state, and it's obvious state, they're just recording that the events they are attached to happened, so that any arbitrary code can later check that state an d know the events occurred. This makes both understanding the code easier (as the reader doesn't have to deal with interactiosn with timers in event handlers, and easier to modify.
posted by orthogonality at 1:36 PM on March 6, 2009

Also, note that we've further encapsulated any information about how to show the next pic, and what pic to show, in the opaque function next_pic, and that any arbitrary code can call that and expect it to do the right thing. Again, less coupling, and less complexity.
posted by orthogonality at 1:39 PM on March 6, 2009

I agree, orthogonality. By "disable," I meant I was thinking of either setting some kind of flag like "switch or don't switch." More fun, repeating events can be set with setInterval(), so we don't even have to create the next event, which is nice.
posted by adipocere at 3:06 PM on March 6, 2009

Then, load your five static images up and switch to the next one via a timer event.

They're going to get out of sync if you go that route.
posted by Netzapper at 4:41 PM on March 6, 2009

Thanks to all those who answered. This demonstrates the strong power of AskMe.

I appreciate the overwhelming votes for javascript over flash. That gives me a clear direction.

I marked that one answer as the "Best Answer" because it looks like it will be the easiest to adapt and implement. The remaining suggestions are taken as reinforcement and encouragement.
I have not done the code yet (A late night [and other chores] is inhibiting my creativity-fu.)

Yes, while I am a seasoned C programmer the details of javascript are not in my pouch of tricks. I actually had to learn something here (yippie!)

Anyone who is really interested in the result or wants to offer help above and beyond the call may email me (memail or see profile)
posted by Drasher at 10:22 AM on March 7, 2009