Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Image change fade

[kentcounty]

Can anyone recommend an image change fade in/out script, preferably that will work with the main big browsers.

I`m unsure whether a flash image would be better? Not everyone wishes to install a flash plugin. or does it not matter?

The way I see it, if someone does not have flash plugin installed, they get an ugly emtpy box!

The only javascript effects I`ve found, only work the fade effect in IE6.

[BlitzHosting.net]

hey buddy.. about your flash theory:

consider that (im guessing) 80% of all websites that are being made now have some element of flash in them.. intro, header, buttons, even full sites.. The majority of templates sold on most site's now are flash templates.. Most browsers can install flash plugins within a minute automatically.. IE is actually flash enabled, or atleast i dont remember even installing the plugin..

Go with flash, it will save alot of time

[AnyDemo]

Hello,

You may also consider .GIF or Java Applet for the fade in / out effect.

[rrdega]

You may also consider .GIF or Java Applet for the fade in / out effect.

:::Shudder::: Sorry! Not taking a shot at you, AnyDemo, as I am certain you know these are probably not the best of options, since both have the propensity to produce large and/or sluggish pages. {I, personally, deplore pages using JavaJunque; this from a past JavaJunkie...}

I believe I read someplace lately that over 80% of browsers have the Flash Player installed... In fact, isn't it coming preinstalled in new M$ OS Boxes?

I am a recent convert to using Flash... I used to hold an opinion similar to the above {Animated GIF/Java Applet} in this regard, until I was pulled {kicking and screaming all the way...} into it by client demands. I purchased SWiSHMax { http://www.swishzone.com/ } as a "cost-effective" means of breaking into the technology... Wow! Was I ever surprised when I created a {decent-sized} Widget, and it came in at under 50KB!! Its all in how the tool is used, as to what is produced... Be it large, small, fast or slow...

So, my recommendation? Give Flash a shot... I think you will find it a pleasurable experience!!

[error404]

I had the same question 2 years ago when fooling around with Javascript image manipulation in Mozilla, and finding only solutions that worked in IE. I went ahead and wrote a version that works in IE and Mozilla/Firefox. I should update it to support Opera, Konqueror, and the CSS3 spec as well, but I haven't got around to it. If you find out what CSS tags to change, it should be fairly trivial to modify (if you let me know, I'll update it).

Get the Javascript source here: http://infinity.gotroot.ca/fade.js

Basically just call fadeIn() and fadeOut(), with the target object as the parameter whenever you want that action to happen. If you need an example, check out http://infinity.gotroot.ca/oldindex.php that uses this code.

Edit: I'm not positive, but I guess it sounds like you're looking for a script to fade *between* two images. This really isn't *that* much more code, but I don't have anything in my repository. The general idea would be to place two img containers on top of each other, fading out the top one. When it's faded out, swap the containers (the references, anyway), load the new image in the back one, and fade out the front one. Repeat ad infinitum.