Crossfade image in website

[oohrogerpalmer]

Hi.

 

I'm designing a website and have a image on the homepage of a overhead view of a park. I also have a plan view of the park, which is much clearer.

 

I'd like to be able to offer the users the option to view either the overhead view, or the plan view, but I'd like to fade in so that the link between the two is obvious, either by clicking the image or button.

 

I thought this might be a simple html code but my investigations have scared me a bit.

It seems I will have to do this using either flash or jquery, which means learning something new.

 

Does anyone know which would be most appropriate for this, and if this is the only/best way to do this?

 

Also any REALLY basic tutorials on either would be wonderful, as I don't have the faintest idea what either are (for example are they free?)

[PicnicTutorials]

" but I'd like to fade in so that the link between the two is obvious, either by clicking the image or button."

 

What does that mean? Can you expand on that?

[oohrogerpalmer]

Sorry, I realised when I read it back it wasn't very clear.

 

I have two images of this park. One is an aerial photo of it, and the other is a line drawn plan that identifies separate areas like the play park, the toilets etc.

 

I'm trying to initially show the aerial picture and then when the mouse moves over the picture, the line drawn plan view fades into view over the aerial view. (I've seen this referred to as 'crossfading').

 

Hope this explains it better.

[PicnicTutorials]

Yeah, you would need JS for that. This search and/or the first link looks promising...

 

http://www.google.com/search?hl=en&q=jquery+image+fade+in&sourceid=navclient-ff&rlz=1B3GGGL_enUS340US340&ie=UTF-8

[oohrogerpalmer]

I've watched the video and pretty sure I can do that - but I am a bit lost in the technical aspects of jquery.

 

Thanks for the advice.

[NuCoder]

Check out Stefan's new JQuery video tutorials. IMO Stefan holds one of the best podcasts on the net.....