I'm trying to implement a solution for an office map type application. My overall goal is to have the map load up as an image, use an image map to define a region for each office and then when they mouseover the office have it pop up the information on who sits there.
Right now I'm trying to define the datatable and then figure out how I can get the info from each region and use that to grab the data from the datatable. I will be using the 'OfficeNumber' to grab the information for each record. Currently, I have this code for the datatable.
Dim strCon As String
strCon = "Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=dwstage;Data Source=pfcdb"
Dim strSql As String
strSql = "SELECT DISTINCT VHRID, Firstname + ' ' + Lastname AS Name, Location, Email, Title as EmpTitle, OfficeNumber, Notary, '(' + LEFT (OfficePhone, 3) + ') ' + SUBSTRING(OfficePhone, 4, 3) + '-' + RIGHT (OfficePhone, 4) AS OfficePhone, ShowPhoto, ShowHome, ShowCell, ShowBDay FROM MasterEmployeeStage WHERE LEFT(OfficeNumber,2) = '24' " 'here is our SQL string
Dim MysqlConnection As SqlConnection
MysqlConnection = New SqlConnection(strCon)
MysqlConnection.Open()
Dim dataadapter As SqlDataAdapter
dataadapter = New SqlDataAdapter(strSql, MysqlConnection)
Dim mydatatable As DataTable
mydatatable = New DataTable
dataadapter.Fill(mydatatable)
I am planning on using a formview to show the information, but I'm not sure how to implement the officenumber on the mouseover. Here is what I have laid out for the formview right now.
<asp:FormView ID="FormViewOffice" runat="server" BackColor="#F3F5F3">
<ItemTemplate>
<table>
<tr>
<td style="width: 150px; height: 130px" valign="top">
<asp:Label ID="Label13" runat="server" Visible="false" Text='<%# ShowPhotoCheck(Eval("ShowPhoto")) %>'></asp:Label>
<asp:Image ID="Image1" runat="server" Height="142px" BorderColor="#cccccc" BorderWidth="3px" ImageAlign="Middle" ImageUrl='<%# checkfile(Eval("VHRID")) %>'
Width="140px" /></td>
<td style="width: 240px; height: 130px; font-family: Verdana; font-size: 10px;" valign="top">
<strong>Name</strong>:
<asp:Label ID="NameLabel" runat="server" Text='<%# Bind("Name") %>'></asp:Label><br />
<asp:Image ID="Image4" runat="server" Height="1px" ImageUrl="images/spacer_invis.gif" /><br />
<strong>Title</strong>:
<asp:Label ID="TitleLabel" runat="server" Font-Italic="True" Text='<%# Bind("EmpTitle") %>'></asp:Label><br />
<asp:Image ID="Image2" runat="server" Height="1px" ImageUrl="images/spacer_invis.gif" /><br />
<strong>Location</strong>:
<asp:Label ID="LocationLabel" runat="server" Text='<%# Bind("Location") %>'></asp:Label><br />
<asp:Image ID="Image3" runat="server" Height="1px" ImageUrl="images/spacer_invis.gif" /><br />
<strong>Email</strong>: <a href='mailto:<%# Eval("Email") %>'><%# Eval("Email") %></a><br />
<asp:Image ID="Image6" runat="server" Height="1px" ImageUrl="images/spacer_invis.gif" /><br />
<strong>Office Phone</strong>:
<asp:Label ID="OfficePhoneLabel" runat="server" Text='<%# Bind("OfficePhone") %>'></asp:Label><br />
<asp:Image ID="Image7" runat="server" Height="1px" ImageUrl="images/spacer_invis.gif" /><br />
<strong>Office Number</strong>:
<asp:Label ID="OfficeNumberLabel" runat="server" Text='<%# Bind("OfficeNumber") %>'></asp:Label><br />
<asp:Image ID="Image10" runat="server" Height="1px" ImageUrl="images/spacer_invis.gif" /><br />
<strong>Notary</strong>:
<asp:Label ID="NotaryLabel" runat="server" Text='<%# NotaryCheck(Eval("Notary")) %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
Will this approach work? If so, how do I setup the mouseover to link to the proper record here?
Thanks very much for your time.