How can I create a stacked list of thumbnails, each one expanding with more info?

As the subject suggests, I'm interested in having a "picture/information" page on my site. I want a simple list of 5 to 10 thumbnailed pictures when the page loads in which each one is stacked on the other. I would like each to expand with a bigger picture and text information about the picture via user interaction. I have two options - I don't care which one I use:

#1. Once loaded, I would like each thumbnailed picture, once clicked, to expand and show a bigger picture and text information about the picture. I wouldn't mind using this option but this option is more of a hassle and causes more clutter/less interaction.

#2. As I thought about this, I think a better option would be to expand to a bigger picture and text information using a mouse rollover instead of a click so that, once a user moves the mouse back off the bigger picture and information, it reduces back to the thumnail. This would allow for a better organized and better looking page. This effect, I would assume, is almost like text links changing color using mouse rollover.

* Which option would you suggest using?

* Is option #2 even possible?

* I would prefer using option #2.

* I've experimented with this code (however, it used option #1, not #2, and it requires clicking an entirely different button to do so):
<script langauge="javascript">

function changeIt(){

if(document.checker.checker.value==1){
var width=100
var height=100

document.checker.checker.value=2
}else{
document.checker.checker.value=1
var width=284
var height=229
}

document.main.width=width
document.main.height=height
}

</script>

<form name="checker">
<input name="checker" type="hidden" id="checker" value="2" checker="1">
</form>

<img src="image.gif" name="main" width="100" height="100">
<BR>
<input type="button" value=" Change " onclick="changeIt()">

:thumbsup: Thanks ahead of time guys for any help,
~obededom~

I prefer #1 because it is more common interface. But of course the #2 may look better is some designs.
Anyway, you may use the "onnouseover" and "onmouseout" events to implement #2.
Example:

<script type="text/javascript">
function showHide(toShow, toHide) {
document.getElementById(toShow).style.display ='block';
document.getElementById(toHide).style.display ='none';
}
</script>
<div onmouseover="showHide('img2', 'img1');" onmouseout="showHide('img1', 'img2');">
<img id="img1" src="http://www.codingforums.com/images/smilies/confused.gif">
<img id="img2" src="http://www.codingforums.com/images/smilies/thumbsup.gif" style="display:none;">
</div>

Thanks - the code works well. However, is there a way I could implemenent text into the script when mouseover or should I just create a graphic with text in it that is used with mouseover?

Try this:


<script type="text/javascript">
function showHide(toShow, toHide, text) {
document.getElementById(toShow).style.display = 'block';
document.getElementById(toHide).style.display = 'none';
var desc = document.getElementById('description');
while (desc.firstChild) {
desc.removeChild(desc.firstChild);
}
desc.appendChild(document.createTextNode(text));
}
</script>
<div style="float: left;" onmouseover="showHide('img2', 'img1', 'Use onmouseover/onmouseout!');" onmouseout="showHide('img1', 'img2', 'How to change image and text?');">
<img id="img1" src="http://www.codingforums.com/images/smilies/confused.gif">
<img id="img2" src="http://www.codingforums.com/images/smilies/thumbsup.gif" style="display:none;"><br>
</div>
<span id="description">How to change image and text?</span>

Hey man, thanks a lot. That script works even better with the text. I have one question, though. How can I have more than one picture stacked on top of each other (I've tried using the script more than once, plus using <br>, but it doesn't work) like this:

:)
:)
:)
:)
:)

??

Also, I tried changing the font to a different color (in this case white) using Dreamweaver and I can't for some reason. Maybe the time of day has something to do with it, don't know :).

Anyway, thanks again,
~obededom~

Note the id attribute - it should be unique.
When add next block of images change the images id and change the showHide calls.

That works (I am able to have more than one). However, it's not really organized. Using Dreamweaver, I was able to get the pictures stacked on top of each other, but during mouseover, the text with every picture appears at the top in the same place.