Animated Rollovers That Start On Cue

Why do you pass 2 values to a function expecting 4?

You have:
ONMOUSEOVER="imageChange('global','alt2')" ONMOUSEOUT="imageChange('global','alt0')"

and the function is:
function imageChange(imageID,imageName,imageID2,imageName2)

Geez, if you're going to steal code, why not at least make sure you know what you are doing with it.

onMouseOver="imageChange('global','alt1','imgname','graphic1on')" onMouseOut="imageChange('global','alt0','imgname','graphic1')"

But otherwise, the image should start with the first frame of animation when rolled over (replaced) but then it will run indefinitely in the background if you have it looping. If you don't have it looping, it will run though the animation and then stop and that will be that.

Fading out is the one you won't be able to do, unless you have a few more images...

alt0 -- static
alt1 -- fadein
alt2 -- fade out

So that it would be img src="alt0.gif" and onMouseOver would be alt1 and onMouseOut would be alt2 and if you have an onClick function, et cetera, you will need more images for that.

If you are going to get that complex, you might as well do it in Flash.

Suzanne

" Geez, if you're going to steal code, why not at least make sure you know what you are doing with it. "

Listen miss snottypants, I didn't steal the code; I got it at a Javascript site (I believe it was at that delightful lad Joe Burn's site, htmlgoodies.com). Second, if I knew what I was doing then I wouldn't need to "steal" script now would I? I'd be able to code it all myself.

I don't know Javascript. I had to fiddle around with this a lot just to both adapt it to my site and get rid of the error messages that ensued; I'm lucky enough it even runs, nevermind the fact that there's excess code.

But I digress; you are right, I should use Flash.

wow, little miss snotty pants! lol! Touchy much?

Hey, my point was that you didn't write it. You are using something without knowing what you are doing. And in this case, you don't even know WHY you are doing things. You likely got error messages BECAUSE of this.

There are lots of reasons why you would use someone else's script, by the way -- because it's already done, because they are helpful, et cetera. But usually (and I mean 99% of the time) scripts that are offered up have copyright notices, and/or readme files that explain how they work.

http://www.irt.org may be of interest to you -- they explain how JavaScript works for various applications and help you write the code. So you will understand what you are doing.

Also, if you are going to use JavaScript, invest in a class or a good how-to book for reference. Really. Boards like this are great resources, but you won't learn unless you sit down and figure it out.

Hi Chintz,

SAM's Javascript in 24 Hours
Joe Burns' javascript primer section

Hi Suzanne,

Guess I'm one of those 1%ers.

Vinny

Yeah, you are! Actually, a lot of little snippets from places like Dynamic Drive and such have copyright notices larger than the snippet! ha!

It's wonderful that you offer your stuff for free. Very, very gracious of you.

Little Miss Snotty Pants

Snottypants and Vincent,

I'm actually in the process of learning JavaScript from htmlgoodies.com. I'll look for SAM's site once I've done with that. Slowly I'm gaining an understanding but in the meetime I rely on helpful boards like this to fill the gaps in my knowlege.

Still, the script runs error-free fine; the gifs just display on their last frames, that's all, which is kinda annoying. If you hit F5 when the mouse is on the mouseover text, you can kinda see it fade in, but after that initial point when the page is loaded it's no good. Flash seems a more valid option, though I'd rather keep it as a last option if at all possible.

I wasn't being touchy. Though I really don't like to be accused of stealing anything, I was actually typing that snottypants comment with a joking tone in my mind. Sorry if I offended, though something tells me you didn't loose too much sleep over that less-than-cutting remark.

I'm pretty unoffendable sometimes. I didn't mean to come off as I did. I generally say nab, or nick, or pilfer, but people seem to misunderstand me even more then! I just meant that you didn't write it yourself, and I thought it was likely that you nabbed (nicked, pilfered, cut'n'pasted, sourced, copied, 'borrowed') it from someone's site, not a tutorial or script site (because except for Vincent's site, they have instructions attached).

***

The thing with the animated gifs is that once they load, they go. You would have to actually NOT preload them, and load them onMouseOver to get them to start at the right spot. If you have them looping you will get all sorts of weird timings on them, but with a finite number of loops (from zero up) they will stop at the last frame and stay there.

Most ani.gifs are too big to not preload. Sadly.

Congrats on picking up some more of the language -- it really is worth it, all snotty pants aside.

Suzanne

Hi Chintzmaster,

SAM's Javascript in 24 hours is a book; it's geared for beginners -- starts with var declarations and assignments and ends with a shopping cart and a game of soltaire.

Re your fade in/fade out: there's a script at http://www.javascriptcity.com forums (Post a Javascript section) that does a beautiful fade and text spreading (like th i s).
If I remember right, it was written by big_wreck, one of the regular posters.

Hi Suzanne,

Thank you [appropriate bow and a faint blush].

Vinny

With my recently attained understanding of JS, I took another look at the script I was using and fixed it! All it really meant was moving things around and then adding a set of fadeouts (*#s.gif).

I made it look like this:

<script LANGUAGE="JavaScript">

alt0 = new Image();
alt1 = new Image();
alt2 = new Image();
alt3 = new Image();
alt4 = new Image();
alt5 = new Image();
alt6 = new Image();

alt10 = new Image();
alt11 = new Image();
alt12 = new Image();
alt13 = new Image();
alt14 = new Image();
alt15 = new Image();
alt16 = new Image();

graphic1= new Image();
graphic1.src = "blank.gif";
graphic1on = new Image();
graphic1on.src = "blank.gif";

graphic2= new Image();
graphic2.src = "blank.gif";
graphic2on = new Image();
graphic2on.src = "blank.gif";

function imageChange(imageID,imageName)
{
alt6.src = "imgs/property_home7.gif";
alt0.src = "imgs/property_home.gif";
alt1.src = "imgs/property_home2.gif";
alt2.src = "imgs/property_home3.gif";
alt3.src = "imgs/property_home4.gif";
alt4.src = "imgs/property_home5.gif";
alt5.src = "imgs/property_home6.gif";

alt16.src = "imgs/property_home7s.gif";
alt10.src = "imgs/property_home.gif";
alt11.src = "imgs/property_home2s.gif";
alt12.src = "imgs/property_home3s.gif";
alt13.src = "imgs/property_home4s.gif";
alt14.src = "imgs/property_home5s.gif";
alt15.src = "imgs/property_home6s.gif";

{
document.images[imageID].src = eval(imageName + ".src");
}

}
</script>

I pat myself on the back for the first practical use I've made of the JS I've learned, then in doing so get made fun of by someone standing nearby for looking like a fool.

Hi Chintzmaster,

To paraphrase Forrest Gump: Fool is as fool does
What would the world be if we all weren't fools? (Besides boring and stuffy)

Congratulations!!! And welcome to the world of coding, where little things that work right make the world seem rosier; and virtually no new code works for the first time.

Vinny