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=http://www.codingforums.com/archive/index.php/"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~