Hi,
I want to create a webpage which contains an imagemap with hotspots. On mouse move over the hotspots I want to display a tool tip, not just the alt.Text, but rather more information with another image and some text. I was following the RadToolTip demo (First Look) and adapted the same method to create this. But it is not working. I am attaching the code (only two web pages). Please some one take a look and tell me what I am doing wrong. The tool tip information is not pulled from any database but generated in the codebehind file based on the ID of the hotspot.
Since I spend almost a week playing with it with out any luck, any help is greately appreciated,
Thanks
Joe
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultCS.aspx.cs" Inherits="tooltiptest.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="LocSummary.ascx" TagName="LocSummary" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
style
type
=
"text/css"
>
.test
{
float: right;
}
</
style
>
</
head
>
<
body
class
=
"BODY"
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
runat
=
"server"
>
</
telerik:RadStyleSheetManager
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
h1
> Our Locations </
h1
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
Skin
=
"Forest"
DecoratedControls
=
"All"
/>
<
div
id
=
"mainimgdiv"
style
=
" width:800px; height:500px"
>
<
asp:imageMap
ID
=
"cdslocations"
runat
=
"server"
ImageUrl
=
"cdslocs.jpg"
HotSpotMode
=
"PostBack"
Enabled
=
"true"
ViewStateMode
=
"Enabled"
>
</
asp:imageMap
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
></
telerik:RadAjaxLoadingPanel
>
<
telerik:RadToolTipManager
runat
=
"server"
AnimationDuration
=
"300"
ShowDelay
=
"200"
EnableShadow
=
"True"
HideDelay
=
"1"
ID
=
"RadToolTipManager1"
Width
=
"453px"
Height
=
"210px"
RelativeTo
=
"BrowserWindow"
Animation
=
"Slide"
OnAjaxUpdate
=
"OnAjaxUpdate"
Skin
=
"Telerik"
Title
=
"Location Summary:"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadToolTipManager1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadToolTipManager1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
</
div
>
</
form
>
</
body
>
</
html
>
Code behind
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Threading;
using System.IO;
using Telerik;
namespace tooltiptest
{
public partial class DefaultCS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// define the circle hotspot
CircleHotSpot Circle1 = new CircleHotSpot();
Circle1.HotSpotMode = HotSpotMode.PostBack;
Circle1.NavigateUrl = "~/northnj.aspx";
Circle1.X = 458;
Circle1.Y = 120;
Circle1.Radius = 15;
Circle1.AlternateText = "WH";
// Add Circle1 to the ImageMap's HotSpotCollection.
cdslocations.HotSpots.Add(Circle1);
CircleHotSpot Circle2 = new CircleHotSpot();
Circle2.HotSpotMode = HotSpotMode.PostBack;
// Circle2.NavigateUrl = "~/lehighvalley.aspx";
Circle2.X = 433;
Circle2.Y = 128;
Circle2.Radius = 15;
Circle2.AlternateText = "AT";
cdslocations.HotSpots.Add(Circle2);
CircleHotSpot Circle3 = new CircleHotSpot();
Circle3.HotSpotMode = HotSpotMode.PostBack;
// Circle3.NavigateUrl = "~/fortwayne.aspx";
Circle3.X = 352;
Circle3.Y = 143;
Circle3.Radius = 15;
Circle3.AlternateText = "BF";
cdslocations.HotSpots.Add(Circle3);
CircleHotSpot Circle4 = new CircleHotSpot();
Circle4.HotSpotMode = HotSpotMode.PostBack;
// Circle4.NavigateUrl = "~/stlouis.aspx";
Circle4.X = 317;
Circle4.Y = 172;
Circle4.Radius = 15;
Circle4.AlternateText = "EV";
cdslocations.HotSpots.Add(Circle4);
CircleHotSpot Circle5 = new CircleHotSpot();
Circle5.HotSpotMode = HotSpotMode.PostBack;
//Circle5.NavigateUrl = "~/tulsa.aspx";
Circle5.X = 263;
Circle5.Y = 208;
Circle5.Radius = 15;
Circle5.AlternateText = "FG";
cdslocations.HotSpots.Add(Circle5);
CircleHotSpot Circle6 = new CircleHotSpot();
Circle6.HotSpotMode = HotSpotMode.PostBack;
//Circle6.NavigateUrl = "~/losangelos.aspx";
Circle6.X = 49;
Circle6.Y = 203;
Circle6.Radius = 15;
Circle6.AlternateText = "ON";
cdslocations.HotSpots.Add(Circle6);
foreach (CircleHotSpot spot in cdslocations.HotSpots)
{
//The first argument of add method requires the client Id
//the example implementation will set the id to be the name of the country itself
this.RadToolTipManager1.TargetControls.Add(spot.AlternateText, spot.AlternateText, true);
}
}
protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
{
this.UpdateToolTip(args.Value, args.UpdatePanel);
}
private void UpdateToolTip(string elementID, UpdatePanel panel)
{
Control ctrl = Page.LoadControl("LocSummary.ascx");
panel.ContentTemplateContainer.Controls.Add(ctrl);
LocSummary details = (LocSummary)ctrl;
details.LocId = elementID;
}
}
}
LocSummary ASpx - this is a user control file which should show as tooltip
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LocSummary.ascx.cs" Inherits="tooltiptest.LocSummary" %>
<
asp:FormView
ID
=
"LocView"
DataKeyNames
=
"LocId"
runat
=
"server"
OnDataBound
=
"LocView_DataBound"
Width
=
"453px"
onpageindexchanging
=
"LocView_PageIndexChanging"
CellPadding
=
"4"
ForeColor
=
"#333333"
>
<
FooterStyle
BackColor
=
"#990000"
Font-Bold
=
"True"
ForeColor
=
"White"
/>
<
HeaderStyle
BackColor
=
"#990000"
Font-Bold
=
"True"
ForeColor
=
"White"
/>
<
ItemTemplate
>
<
div
style="float: left; border: 1px solid #999999; margin-right: 20px; width: 200px;
height: 200px; background-position: center; background-repeat: no-repeat;" >
<
asp:Image
ID
=
"LocImage"
runat
=
"server"
/>
</
div
>
<
div
style
=
"width: 200px; float: left;"
>
<
div
style
=
"float: left; padding-top: 20px;"
>
<
asp:Label
CssClass
=
"info"
ID
=
"LocationName"
runat
=
"server"
Style
=
"font-size: 24px; padding-left: 4px;"
></
asp:Label
>
<
br
/>
<
br
/>
<
span
class
=
'title'
style
=
"color: #c98400"
>Highways:</
span
>
<
asp:Label
CssClass
=
"info"
ID
=
"LbHigways"
runat
=
"server"
></
asp:Label
>
<
br
/>
<
span
class
=
'title'
style
=
"color: #c98400"
>Squre Foot:</
span
>
<
asp:Label
CssClass
=
"info"
ID
=
"LbSqFoot"
runat
=
"server"
></
asp:Label
>
<
br
/>
<
span
class
=
'title'
style
=
"color: #c98400"
>Construction:</
span
>
<
asp:Label
CssClass
=
"info"
ID
=
"LbConstruction"
runat
=
"server"
></
asp:Label
>
<
br
/>
</
div
>
</
div
>
</
ItemTemplate
>
<
PagerStyle
BackColor
=
"#FFCC66"
ForeColor
=
"#333333"
HorizontalAlign
=
"Center"
/>
<
RowStyle
BackColor
=
"#FFFBD6"
ForeColor
=
"#333333"
/>
</
asp:FormView
>
Code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
using System.IO;
namespace tooltiptest
{
public partial class LocSummary : System.Web.UI.UserControl
{
public string LocId
{
get
{
if (ViewState["LocId"] == null)
{
return "";
}
return (string)ViewState["LocId"];
}
set
{
ViewState["LocId"] = value;
}
}
protected void LocView_PageIndexChanging(object sender, FormViewPageEventArgs e)
{
}
protected void Page_Load(object sender, EventArgs e)
{
this.DataBind();
}
protected void LocView_DataBound(object sender, EventArgs e)
{
string lcID = e.ToString();
string locName = "" ;
string locHigWays = "";
string locSqFoot = "";
string locConstruction = "";
string lcImageUrl = "";
switch (LocId)
{
case "WH":
locName = "Wharton, NJ";
locHigWays = "80/46";
locSqFoot = "650000";
locConstruction = "Concrete";
lcImageUrl = "smallloc.png";
break;
case "PA":
locName = "Pensilvania, PA";
locHigWays = "80/78";
locSqFoot = "650000";
locConstruction = "Concrete";
lcImageUrl = "smallloc.png";
break;
case "CA":
locName = "Ontario, CA";
locHigWays = "100/80/35";
locSqFoot = "350000";
locConstruction = "Concrete";
lcImageUrl = "smallloc.png";
break;
case "BF":
locName = "Bluffton, IN";
locHigWays = "200/145";
locSqFoot = "150000";
locConstruction = "Concrete";
lcImageUrl = "smallloc.png";
break;
case "IL":
locName = "Edwardsville, IL";
locHigWays = "66/77";
locSqFoot = "650000";
locConstruction = "Steel";
lcImageUrl = "smallloc.png";
break;
case "FG":
locName = "Fort Gibson, OK";
locHigWays = "35/76";
locSqFoot = "450000";
locConstruction = "Steel";
lcImageUrl = "smallloc.png";
break;
default:
locName = "Wharton, NJ";
locHigWays = "80/78";
locSqFoot = "650000";
locConstruction = "Concrete";
lcImageUrl = "smallloc.png";
break;
}
//populate the summary information of the location
System.Web.UI.WebControls.Image image = (System.Web.UI.WebControls.Image)this.FindControl("LocImage");
if (image == null) return;
if (!File.Exists(MapPath(image.ImageUrl)))
{
image.ImageUrl = lcImageUrl;
}
System.Web.UI.WebControls.Literal lit1 = (System.Web.UI.WebControls.Literal)this.FindControl("LocationName");
lit1.Text = locName;
System.Web.UI.WebControls.Literal lit2 = (System.Web.UI.WebControls.Literal)this.FindControl("LbHigways");
lit2.Text = locHigWays;
System.Web.UI.WebControls.Literal lit4 = (System.Web.UI.WebControls.Literal)this.FindControl("LbSqFoot");
lit1.Text = locSqFoot;
System.Web.UI.WebControls.Literal lit5 = (System.Web.UI.WebControls.Literal)this.FindControl("LbConstruction");
lit1.Text = locConstruction;
}
}
}