onClick - Help!

[TBanks]

Hi,

I'm trying to create a portfolio display where my thumbnails are across the bottom of the page and the appropriate larger image displays (as you click each thumbnail) above the thumbnails and to the left side. Above and to the right side, I want the text about the project to appear. I've been able to get the thumbnails to click and make a larger image appear, but I haven't a clue as to how to get the text to change with each thumbnail click as well. Here's what I've done so far.

<script language="javascript">
<!--
function changePict(pict){
document.pictToChange.src=pict
}
//-->
</script>

. The html/javascript code for the thumbnails:

<a href="#" onClick="changePict('/images/test.gif')"><img src="/images/test_thumb.gif" width="63" height="58" /></a>

and the placeholder is defined in an image tag

<img src="test.gif" name="pictToChange" />

at the location where the larger display images should show.

I tried inserting

"document.write('insert project description here')

in the "onCLick="changePict..." (along with the other function (?changePict) but then it just opens a new window with the text before displaying the larger image properly (depending on which browser you have...)

The three sections are laid out as divs and I'm trying to avoid making the project description text an image. I'm trying to stick with pure CSS (still learning!)

Can someone help me with this?

You can see what I'm doing at http://www.eodweb.com/draft/portfolio.htm

Thanks!

Toni

[CatsEyeDesigns]

Well, I'm not Javascript expert, but this works in IE 5,6. As far as other browsers, I'm not sure, so you'll have to test it. Also, I'm not certain that this is the best solution, but it should provide you with the functionality you need.

<a onclick="text1.style.visibility='visible';  text2.style.visibility='hidden'; window.status='';">Show 1</a>
<a onclick="text2.style.visibility='visible';  text1.style.visibility='hidden'; window.status='';">Show 2</a>

<div style="visibility: hidden;" id="text1">This is the text to show when link one is clicked</div>
<div style="visibility: visible;" id="text2">This is the text to show when link two is clicked</div>