DataGrid and Image Database

[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" AutoGenerateCol umns="False"
ShowFooter="Tru e" OnPageIndexChan ged="DataGrid1_ Paged"
Width="70%" CellPadding="4" BorderWidth="1p x" BorderStyle="Ri dge"
BorderColor="Li ghtGray"
CssClass="txtAr ea" GridLines="Hori zontal"
HeaderStyle-HorizontalAlign ="Center" HeaderStyle-Font-Bold="True"
AlternatingItem Style-BackColor="Whit eSmoke" AllowPaging="Tr ue"
PagerStyle-Mode="NextPrev"
AllowSorting="T rue">
<AlternatingIte mStyle BackColor="Whit eSmoke"></AlternatingItem Style>
<ItemStyle HorizontalAlign ="Center"></ItemStyle>
<HeaderStyle Font-Bold="True" HorizontalAlign ="Center"></HeaderStyle>
<Columns>
<asp:TemplateCo lumn HeaderText="" ItemStyle-HorizontalAlign ="Center">
<ItemTemplate >
<img ID='I<%# DataBinder.Eval (Container, "ItemIndex" )%>'
src="../images/user.gif" style="cursor: hand"
onmouseover="ja vascript:showTo pic(<%# DataBinder.Eval (Container,
"ItemIndex")%>) ;" onmouseout="jav ascript:hideIma ge(<%#
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:TemplateCol umn>
<asp:BoundColum n HeaderText="Nam e" DataFormatStrin g="{0}"
DataField="Name "></asp:BoundColumn >
<asp:BoundColum n HeaderText="Dep t." DataFormatStrin g="{0}"
DataField="Dept ."></asp:BoundColumn >
<asp:BoundColum n HeaderText="Ext ." DataFormatStrin g="{0}"
DataField="Ext" ></asp:BoundColumn >
<asp:HyperLinkC olumn HeaderText="Ema il" Text="<img
src='../images/envelope.gif' border='0'>" DataNavigateUrl Field="Email"
DataNavigateUrl FormatString="m ailto:{0}"></asp:HyperLinkCo lumn>
</Columns>
</asp:datagrid>

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

var image = document.getEle mentById('d' + num);
image.style.dis play = 'inline';

lastSelectedNum = num;
}

function hideImage(num)
{
// hide image layer
var image = document.getEle mentById('d' + num);
image.style.dis play = 'none';
}