Roll-over effect request

[gumbystation]

I have a special request.

I'm looking to have a <div>. In it:
-- a single picture at the top, centered
-- below text

What I would like to have a a roll-over effect where you hover over text, and that centered picture changes. I want to display a lot of logo designs that I have. Maybe, instead of that, have miniture pictures (thumbnails) instead of text and the same thing happen.

I'm not sure what kind of code I should use. And from there, I'm not sure how I should go about it. Anyone have ideas for this? Or better, code that I could look at to try out?

[the tree]

Adapt this script.

<script type="text/javascript">
function change() {
	var num = Math.round(Math.random() * 2);
	if(num == 0)
		document.getElementById("logo").src = "images/index/logo-grimtoaster.jpg";
	else if(num == 1)
		document.getElementById("logo").src = "images/index/logo-tophat.jpg";
	else if(num == 2)
		document.getElementById("logo").src = "images/index/logo-shoes.jpg";
}
function unchange() {
document.getElementById('logo').src = 'images/index/logo-normal.jpg'
}
</script>
<img class="logo" id="logo" src="images/index/logo-normal.jpg" alt="Terry & Shoes"
onmouseover="change();" onmouseout="unchange();" />