Image Rollovers and Text

[ThaSpY]

To better explain what I am looking for, please view this page (http://www.xeroxmedia.com/games.php?game=cod).

On the right, you will see the "Team Roster" block, with member images below (actual images not yet implimented). What I want is for when you roll your mouse over an image, their corresponding name will appear where the text "Select a Member" is. And when you roll off their image, the "Select a Member" will re-appear in that spot.

If you could either point me to a good site/thread (Yes, I've searched my brains out on Google), or write up a quick snippet, I would be most obliged. Thanks.

[sad69]

<script>
function updateMember(memberName) {
var td = document.getElementById('td_selMember');
td.firstChild.removeChild(td.firstChild.firstChild);
td.firstChild.appendChild(document.createTextNode(memberName));
}

function resetMember() {
var td = document.getElementById('td_selMember');
td.firstChild.removeChild(td.firstChild.firstChild);
td.firstChild.appendChild(document.createTextNode('Select a Member'));
}
</script>

...

<table border='0' width='95%' align='center'>
<tr>
<td width='25%' align='center'>
<a href='users.php?game=cod&action=view&to=1'>
<img src='images/rosterblank.gif' border='0' alt='ThaSpY'
onMouseover='updateMember("ThaSpY")' onMouseout='resetMember()'>
</a>
</td>
<td width='25%' align='center'>
<a href='users.php?game=cod&action=view&to=2'>
<img src='images/rosterblank.gif' border='0' alt='Top Hat'
onMouseover='updateMember("Top Hat")' onMouseout='resetMember()'>
</a>
</td>
<td width='25%' align='center'>
<img src='images/rosterblank.gif'>
</td>
<td width='25%' align='center'>
<img src='images/rosterqm.gif'>
</td>
</tr>
<tr>
<td width='25%' align='center'>
<img src='images/rosterblank.gif'>
</td>
<td width='25%' align='center'>
<img src='images/rosterblank.gif'>
</td>
<td width='25%' align='center'>
<img src='images/rosterqm.gif'>
</td>
<td width='25%' align='center'>
<img src='images/rosterblank.gif'>
</td>
</tr>
<tr>
<td colspan='4' align='center' id='td_selMember'><b>Select a Member</b></td>
</tr>
</table>


And then you just have to add those onMouseover / onMouseout events to all the images you want that to happen to.

Let me know how that works out for you. Also, try it on different browsers and make sure it works -- I've only tested it in IE6.

Good luck,
Sadiq.

[ThaSpY]

Thank you so much, I will give this a try. You don't know how much I appreciate it for taking the time to do this. :)

[JAVAEOC]

I would not recommend js for this, because it is possible in basic css: Here take a look: http://www.meyerweb.com/eric/css/edge/popups/demo.html

:D