How Do I Load Images for my portfolio?

[kleid]

I am working on my design portfolio. In my design ( <snip> ) I want to have text links on the left hand side and have them load a portfolio image on the right.

Do I have to make an individual html page for every item? If that's the case (which i'm hoping it isn't), then adding any new items to the list require my changing every single existing page to have the new list item...

Is there a way using CSS (or anything else, preferably not flash) that I can have different images loaded via click into the same viewing area without requiring different html pages?

I think this would also allow me to have collapsable menus that stay in the open or closed state...which i don't know how to do either...

(And if the one html page is not an option, is there a way to have one master list and have it automatically put into all the different portfolio html's?)

I hope this made sense...
Thanks for your time.

p.s. In case you can't tell...I know enough html to get me by (or to make me dangerous)...so be gentle.

[edited by: SuzyUK at 6:37 am (utc) on May 25, 2004]
[edit reason] oops No URLS see TOS #13 [webmasterworld.com] [/edit]

[kleid]

oh. one more thing...it's actually more than an image, it's an image and a description. I realized that that probably changes things quite a bit...

[SuzyUK]

Hi Kleid - Welcome to WebmasterWorld

Simple answer is you have choices :)

If that's the case (which i'm hoping it isn't), then adding any new items to the list require my changing every single existing page to have the new list item...

If using different pages for each item you could use SSI (server side include) to include the menu on each page, (php, asp, javascript.. your method may depend on what your host supports, it very easy (1 x command) if you already use php or asp)

Is there a way using CSS (or anything else, preferably not flash) that I can have different images loaded via click into the same viewing area without requiring different html pages?

Yes, CSS and Javascript would do this by either "toggling" the visibility of div containing the the required image and description, or javascript would do it itself (I think, I'm not the worlds best javascripter, lol) by actually writing the required img code to the page in the onclick event.. (someone else correct me if wrong please!)

Note: CSS is not a scripting language, whereas Javascript is. Javascript is required to activate an onclick event, CSS suggests how the activated elements/divs look.

I think this would also allow me to have collapsable menus that stay in the open or closed state...which i don't know how to do either...

With the above css/javascript methods there would be need to be some extra functionality in the onclick event to dynamically change the class/id of the clicked link in order for the menu to change its appearance (via CSS) as you would effectively not be moving from the one page.

And if the one html page is not an option, is there a way to have one master list and have it automatically put into all the different portfolio html's?

Yes and this is possibly the easiest solution, I find it invaluable anyway :) You should possibly look into the SSI methods (mentioned above). This way you create "template" style pages for your content - leaving a "space" where the menu code should be, then in that space you put in whichever include command suits the method you've chosen and "pull in" the menu code (which is in a seperate file). If you then change the menu code page it will update across all pages it has been included into.

And further within your "templated" image (portfolio htmls) pages if you then use seperate/unique ids or classes on the body element you can achieve nifty "active" menu status effects via CSS. (that technique is described in some previous discussions..)

there's a few choices open to you and others may well have more too..

Suzy

[kleid]

Thanks Suzy!

I know nothing of .asp. but I think I'm going to pursue it. It seems like the best solution. Wish me luck, I'll need it.

Does anyone know a good resource for .asp tutorials?

thanks again.

[isitreal]

Iframes work well for this kind of thing, have the main page be basically two columns, one for the menu, one that will contain the iframe. The iframe holds separate webpages, the menu requests each separate web page, that's a pretty easy way to make what you are looking for. The iframe will have a name, the nav menu links have target="iframe name" so the links know you are talking about the iframe content.