Delaying a rollover effect on web pages?

[chuteless]

I have a web page which uses the rollover thing for buttons, but I would like it so that for the first x seconds, the rollover doesn't work, I just need it to display the original image, even if the mouse is placed over the button. Then after x seconds, the rollover effect works.

Does anyone know of a way to do that?

Thanks

chuteless

[CarlP]

Not possible in plain HTML - you could do it easily in Flash or (slightly less easily) in Java.

[chuteless]

D'oh....oh well. I'm trying to avoid Flash with the whole site (mainly because I have no idea how to do it)...and this was one of the things I wanted to get around.

Thanks anyway.

[Vex]

Rollovers themselves arn't possible in plain HTML...

Rollovers use Javascript, and there's no reason why it shouldn't be possible to add a delay in there. But my javascript is very rusty, so I can't provide a solution for you (my alcohol level at the moment doesn't help either!).

But I reckon it is entirely possible...

Basically if Javascript you could create a counter variable, and a timer event that increases that variable. Then the rollover code would only activate if the counter variable had reached a certain value....

[dOpEy]

not something i ever tried... and dont know if it will work, but as an alternative to flash & java...

Perhaps use CSS to do the rollover effect, and instead of using static jpegs, use animated gifs. The animated gif for when the rollover is activated could show the original image for a few seconds before showing the new image at the end of the file's animation.

Probably more hassle to create the animated gif than to make flash or java. But at least you can keep the whole thing in strict (& compliant) HTML which is important to some people.

[mattsday]

Rollovers themselves arn't possible in plain HTML...

Rollovers use Javascript, and there's no reason why it shouldn't be possible to add a delay in there. But my javascript is very rusty, so I can't provide a solution for you (my alcohol level at the moment doesn't help either!).

But I reckon it is entirely possible...

Basically if Javascript you could create a counter variable, and a timer event that increases that variable. Then the rollover code would only activate if the counter variable had reached a certain value....
There is a function in Javascript that executes a function after a given number of seconds. I can't remember what it's called now though, or whether it can accept any parameters. But in theory, it should be possible, I'm just too tired to think about it in any great depth at the mo'

[Bolch]

Just thinking why you'd want to do this.. It's not because you're waiting for the images to load is it? If there's there's a couple of 'image preloading' scripts about which load all the images/page content then display the page so if you hovered over the image as soon as it appeared you wouldn't get the blank underneath image.

Or if I'm completly wrong in assuming that's what the problem is ignore me :p

[ohood]

dopey : that idea would probably work, good thinking there.

That's the thing about CSS, it's very clever and has some fantastic suprising uses when you put your mind to it.

[Ben Martin]

Vex is correct that "plain HTML" doesn't support rollovers. however, as mentioned in subsequent posts, you can use CSS, which all versions of (X)HTML since v4 have been designed to make use of.

there's no need to overcomplicate matters by using javascript, let alone flash or java. if indeed you are trying to get around the preloading issue, then Dave Shea's CSS Sprites (http://www.alistapart.com/articles/sprites/) article at alistapart.com is for you.

[chuteless]

Thanks for all the ideas....I had started thinking about a javascript count thing, but I'll have a look at CSS aswell.

The reason I want this to happen is that the original button is a gif animation which is played once, so that intead of the button just appearing on the screen when the page loads, it slides in in a nice fancy way. The problem is that at the moment, if the mouse is placed over the button whilst this animation is still playing, then it changes the image to the one specified in the rollover, and doesn't finish the nice sliding thing.....so I need the rollover effect to not work until the gif animation is over. Not sure if that makes sense, but I think it does.

Thanks for the help anyway, I'll have a look and see what I can come up with.