showing/hiding content question

I want to put together a feature where, when a user clicks on a 'next'
link an area containing an image and some copy will be replaced with a
new image and new copy, rather like a slideshow with an image and a
caption.

From doing a little research I understand that this can be done using
either Javascript (layers) or CSS. I'm trying to determine which was is

best for what I want. Here is what I would like to include...

+ The various sizes of the image and the length of the copy will differ
so any content below this slideshow needs to be 'bumped down' if
necessary.

+ I would prefer to do this totally client-side so as not to have to
refresh the entire web page each time they click 'next'.

+ I would like this to support multiple browsers.

Any input on which technology, JS or CSS, would work best keeping in
mind my requirements?

Any good, straightforward examples of your recommendations?
Thanks in advance.

engwar1 (AT) yahoo (DOT) com wrote:

I want to put together a feature where, when a user clicks on a 'next'
link an area containing an image and some copy will be replaced with a
new image and new copy, rather like a slideshow with an image and a
caption.

From doing a little research I understand that this can be done using
either Javascript (layers) or CSS. I'm trying to determine which was is
best for what I want. Here is what I would like to include...

+ The various sizes of the image and the length of the copy will differ
so any content below this slideshow needs to be 'bumped down' if
necessary.

+ I would prefer to do this totally client-side so as not to have to
refresh the entire web page each time they click 'next'.

+ I would like this to support multiple browsers.

Any input on which technology, JS or CSS, would work best keeping in
mind my requirements?

The simplest is to use an IFrame and include the "next" button in the
IFrame. Of course, you can use Scripting to do what you are describing
(CSS can't do it).

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq

I'm not too familiar with IFrames but I think I have a general idea of
how they work. Since my content will range in size it seems that I
wouldn't be able to avoid a scroll bar with an IFrame.

I do think this is possible with CSS, though. The following link shows
how someone shows/hides a graphic using only CSS and no JavaScript. Of
course I want to show/hide both text and graphic so I don't know if
what he's doing will get me where I want to go. He shows how to
hide/show text using CSS on another page but I think it's fairly
different from how he does the images.

http://www.meyerweb.com/eric/css/edge/popups/demo2.html
Thanks for the iFrame comment. I'll keep that in mind.