This is a migrated thread and some comments may be shown as answers.

RAD ToolTip Help on Image Hotspots

3 Answers 125 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Joseph asked on 03 Nov 2010, 10:17 PM

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 />

<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>

</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;

}

3 Answers, 1 is accepted

Accepted

answered on 09 Nov 2010, 10:18 AM

test-demo.zip

Hello Joseph,

I built up a test demo based on your code and I was able to reproduce the problem. It comes from the fact that you actually add IDs to the TargetControls collection but you never set those IDs to the actual hotspots. As a result, the tooltip manager is correctly configured but there are no such targets specified on the page.

In order to get the desired result you should set an ID attribute to each hotspot. Since this cannot be done from code-behind you should use some javascript as it is done in our online demo. For your case you can use e.g the following code:

<!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="~/NewFolder1/MapOfEurope.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:" IgnoreAltAttribute="true" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadToolTipManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<script type="text/javascript">

//<![CDATA[

//IMPORTANT!: On the client the ASP.NET framework prepends the actual map element with the prefix "ImageMap"

var map = document.getElementsByName("ImageMapcdslocations")[0];

var areas = map.getElementsByTagName("AREA");

for (var i = 0; i < areas.length; i++) {

var area = areas[i];

var id = area.getAttribute("alt");

area.style.border = "3px solid red";

area.setAttribute("id", id);

//Prevent from postbacking the page

area.onclick = function(e) { return false; };

//remove the alt attribute to prevent the browser's tooltip from showing

area.removeAttribute("alt");

area.removeAttribute("title");

}

//]]>

</script>

</div>

</form>

</body>

</html>

Note, that the script should be registered at last on the page or you should ensure that the map is created and loaded so that you can manipulate it in javascript.

I hope that my reply is helpful and for your convenience I attached your modified demo, let me know how it goes.

Best wishes,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Accepted

answered on 20 Dec 2010, 03:12 PM

Hi Joseph,

I already answered your other thread and for your convenience and for others who might have the same problem I pasted my reply below:

Thank you for the provided files, I examined them and I was able to reproduce the problem.

The issue you face comes from the fact that when you put the map on the content page, you put it in an INaming Container which changes its ID to be as follows:

ImageMapContentPlaceHolder1_ImageMap1

That is why to achieve what you need you should make sure you have correctly referenced the map - otherwise a js error is thrown and after this happens, unexpected behavior occurs (e.g tooltips do not show).

All the best,
Svetlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.