DHtml, Images and a DataGrid

[Tim::..]

Please, please, please help!!!

I have a datagrid that displays a list of contacts on our intranet site
using the ActiveDirectory as it's main Data Source.

I want to be able to show an image of each employee using a popup layer but
am not sure how I match the Active Directory Data to the correct image stored
in an SQL database. I plan on using the users fullname or email address as an
identifier to match up the image with the correct user but really don't know
how to make sure the correct image is loaded into the layer when you mouse
over a certain employee...

I have created the DataGrid and the popup layer that all have individual
<div> id's but how do I load the image in from the database into the correct
layer...

I would really, really appritiate some help on this on!

Thanks
<<<<CODE>>>>

<asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False"
ShowFooter="True" OnPageIndexChanged="DataGrid1_Paged"
Width="70%" CellPadding="4" BorderWidth="1px" BorderStyle="Ridge"
BorderColor="LightGray"
CssClass="txtArea" GridLines="Horizontal"
HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True"
AlternatingItemStyle-BackColor="WhiteSmoke" AllowPaging="True"
PagerStyle-Mode="NextPrev"
AllowSorting="True">
<AlternatingItemStyle BackColor="WhiteSmoke"></AlternatingItemStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center"></HeaderStyle>
<Columns>
<asp:TemplateColumn HeaderText="" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<img ID='I<%# DataBinder.Eval(Container, "ItemIndex")%>'
src="../images/user.gif" style="cursor: hand"
onmouseover="javascript:showTopic(<%# DataBinder.Eval(Container,
"ItemIndex")%>);" onmouseout="javascript:hideImage(<%#
DataBinder.Eval(Container, "ItemIndex")%>);">
<DIV id='D<%# DataBinder.Eval(Container, "ItemIndex")%>' style="Z-INDEX: 1;
LEFT: 300px; POSITION: absolute; TOP: 100px; HEIGHT: 130px; WIDTH: 100px;
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: white;
display: none;">
<asp:Image Runat="server" ID="userImage"
ImageUrl="../images/NoImage.gif"></asp:Image></DIV>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn HeaderText="Name" DataFormatString="{0}"
DataField="Name"></asp:BoundColumn>
<asp:BoundColumn HeaderText="Dept." DataFormatString="{0}"
DataField="Dept."></asp:BoundColumn>
<asp:BoundColumn HeaderText="Ext." DataFormatString="{0}"
DataField="Ext"></asp:BoundColumn>
<asp:HyperLinkColumn HeaderText="Email" Text="<img
src='../images/envelope.gif' border='0'>" DataNavigateUrlField="Email"
DataNavigateUrlFormatString="mailto:{0}"></asp:HyperLinkColumn>
</Columns>
</asp:datagrid>

<<<JavaScript>>>
var lastSelectedNum = -1;
function showTopic(num)
{
if (lastSelectedNum >= 0)
{
// reset the last selected item
var lastimage = document.getElementById('d' + lastSelectedNum);
lastimage.style.display = 'none';
}

var image = document.getElementById('d' + num);
image.style.display = 'inline';

lastSelectedNum = num;
}

function hideImage(num)
{
// hide image layer
var image = document.getElementById('d' + num);
image.style.display = 'none';
}