Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ToolTip / RadToolTipManager with ImageMap

MapOfEurope AustriaBelgiumDenmarkFinlandFranceGermanyIrelandItalyNorwayPolandPortugalSpainSwedenSwitzerlandUK

  • Loading Large Files

    This example shows how to use RadToolTipManager with asp:ImageMap control.
    When you open a tooltip and make a WebService request to load particular content in the RadToolTip, based on the current hotspot.
    In this particular case we use the Northwind database to fetch the list of customer from a given country. The list is populated in a Repeater and when you click on a customer ID, a RadWindow will be opened that contains the orders sent by this customer presented in RadGrid.


    The WebService class for this example is named ToolTipWebService.cs and can be found in the demo's App_Code folder.



    Please, note that the image map renders content which is not XHTML compliant (due to the way the ID is formed and also the name attribute of the map) - that is why the demo will not successfully pass validation and the RadToolTip control is not the reason for it but the standard image map.



    Note: Since the target areas are not real separate elements, the tooltip should be configured to be relative to the mouse.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ImageMapToolTipManager.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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 runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            a.customer
            {
                color: black;
                text-decoration: none;
                margin-left: 4px;
            }
            a.customer:hover
            {
                color: black;
            }
        </style>
        <script type="text/javascript">

            function AdjustSize(sender, args) {
                sender.autoSize(true);
            }
        
        </script>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" ShowSkinChooser="false" NavigationLanguage="c#"
            XhtmlCompliant="false" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadWindowManager Skin="Hay" ID="RadWindowManager1" Modal="true" runat="server"
            Width="650" Height="600" VisibleStatusbar="false" style="z-index:31000" DestroyOnClose="true" OnClientPageLoad="AdjustSize">
        </telerik:RadWindowManager>
        <asp:ImageMap ID="MapOfEurope" ImageUrl="Img/MapOfEurope.jpg" runat="server" AlternateText="MapOfEurope">
            <asp:PolygonHotSpot AlternateText="Austria" Coordinates="418,383,414,390,427,398,437,400,452,395,463,402,489,404,509,398,521,389,522,377,528,371,525,361,523,351,498,347,488,357,477,357,472,364,465,370,473,385,458,380,443,385,418,383" />
            <asp:PolygonHotSpot AlternateText="Belgium" Coordinates="361,333,367,319,357,299,343,293,330,297,325,294,316,299,341,325,361,333" />
            <asp:PolygonHotSpot AlternateText="Denmark" Coordinates="400,214,446,223,454,215,453,196,449,189,433,193,426,200,420,194,426,187,433,180,423,176,424,170,427,158,423,152,414,159,408,166,400,167,396,178,395,190,397,201,400,214" />
            <asp:PolygonHotSpot AlternateText="Finland" Coordinates="550,-7,540,17,536,29,541,43,546,62,548,78,569,89,593,76,618,64,634,31,643,8,641,-2,550,-7" />
            <asp:PolygonHotSpot AlternateText="France" Coordinates="380,468,383,462,369,452,373,444,367,438,375,432,369,420,373,417,357,413,364,391,381,380,393,350,342,327,313,299,299,301,293,320,275,323,271,333,247,318,247,343,225,334,199,338,201,359,227,372,238,399,242,418,233,455,227,463,253,482,283,491,310,496,310,480,323,473,357,484,369,480,380,468" />
            <asp:PolygonHotSpot AlternateText="Germany" Coordinates="380,246,381,264,375,269,378,277,369,284,364,284,366,297,363,307,368,316,365,329,369,338,394,349,383,379,399,376,415,383,427,381,445,382,455,378,469,381,464,370,474,356,478,352,458,331,455,318,487,303,487,288,479,255,476,238,454,225,417,220,401,216,403,237,394,245,380,246" />
            <asp:PolygonHotSpot AlternateText="Ireland" Coordinates="159,197,157,206,161,209,154,214,166,223,152,235,140,242,143,256,161,261,180,253,195,255,203,240,206,228,204,216,214,212,217,203,214,191,209,187,200,182,184,184,178,192,184,196,177,199,168,198,159,197" />
            <asp:PolygonHotSpot AlternateText="Italy" Coordinates="386,467,380,459,373,452,375,445,371,439,375,432,373,418,388,420,396,414,404,424,415,411,425,414,432,401,443,399,453,397,466,404,477,406,477,421,462,430,462,454,481,471,506,504,526,505,530,510,522,516,572,541,570,550,546,540,538,555,552,562,534,599,517,629,497,621,469,608,470,599,491,596,518,592,527,582,530,575,519,552,494,533,474,526,455,510,426,486,422,467,401,456,386,467" />
            <asp:PolygonHotSpot AlternateText="Norway" Coordinates="460,-4,460,5,450,6,443,15,441,26,441,34,445,49,443,61,451,70,447,77,443,79,448,91,446,102,441,104,439,111,440,125,434,124,431,121,426,110,426,117,419,123,401,140,386,145,374,136,367,125,364,101,364,74,365,55,379,42,393,28,407,16,414,17,424,-2,460,-4" />
            <asp:PolygonHotSpot AlternateText="Poland" Coordinates="479,235,492,306,508,311,517,321,524,315,533,315,534,321,544,324,556,333,561,328,567,336,576,331,590,328,608,330,607,319,620,300,619,289,610,273,607,262,603,259,609,247,599,217,591,213,570,217,546,218,535,219,532,213,523,210,510,216,500,225,479,235" />
            <asp:PolygonHotSpot AlternateText="Portugal" Coordinates="103,472,113,470,117,472,115,478,120,477,129,480,135,479,141,481,140,487,147,490,133,498,129,513,124,519,126,524,121,529,114,528,116,534,120,545,114,549,110,557,115,564,105,571,102,589,93,587,86,582,73,581,79,572,83,563,81,561,86,552,83,547,79,549,78,541,75,538,83,524,90,515,100,499,102,483,103,472" />
            <asp:PolygonHotSpot AlternateText="Spain" Coordinates="102,442,105,468,114,470,119,476,141,478,144,486,149,489,134,499,126,518,126,526,118,531,121,543,111,556,116,564,106,572,103,584,118,595,123,613,133,619,150,611,161,608,189,614,198,613,213,601,225,599,234,583,248,574,240,556,262,531,270,524,291,519,308,507,310,496,288,493,245,480,225,462,163,445,139,437,129,435,115,442,102,442" />
            <asp:PolygonHotSpot AlternateText="Sweden" Coordinates="460,-2,460,5,450,8,442,23,443,41,445,59,451,68,447,80,448,100,440,113,441,125,434,126,438,144,448,168,452,189,461,206,475,204,484,186,497,186,507,162,504,128,518,118,526,97,503,81,499,60,501,38,512,21,531,4,532,0,460,-2" />
            <asp:PolygonHotSpot AlternateText="Switzerland" Coordinates="428,400,415,392,414,384,400,378,375,383,363,397,358,414,373,415,377,420,388,420,396,410,404,422,413,408,423,411,429,406,428,400" />
            <asp:PolygonHotSpot AlternateText="UK" Coordinates="225,116,214,143,222,179,226,198,244,207,244,235,226,232,221,250,209,265,231,282,193,302,204,308,225,306,291,302,302,293,309,263,291,252,287,233,282,216,275,209,271,187,262,175,267,164,275,145,250,138,274,117,244,113,225,116" />
        </asp:ImageMap>
        <telerik:RadToolTipManager ID="RadToolTipManager1" Style="z-index: 1000" ShowCallout="true"
            RelativeTo="Mouse" HideEvent="LeaveToolTip" Position="BottomCenter" Animation="Fade"
            Width="180px" Height="150px" ContentScrolling="Auto" runat="server" Skin="Default"
            EnableShadow="true">
            <WebServiceSettings Method="GetCustomersByCountry" Path="ToolTipWebService.asmx" />
        </telerik:RadToolTipManager>
        <script type="text/javascript">
            //<![CDATA[
            var countryArray = new Array("Austria", "Belgium", "Denmark", "Finland", "France", "Germany", "Ireland", "Italy", "Norway", "Poland", "Portugal", "Spain", "Sweden", "Switzerland", "UK");

            //IMPORTANT!: On the client the ASP.NET framework prepends the actual map element with the prefix "ImageMap"
            var map = document.getElementsByName("ImageMapMapOfEurope")[0];
            var areas = map.getElementsByTagName("AREA");
            for (var i = 0; i < areas.length; i++) {
                var area = areas[i];
                area.setAttribute("id", countryArray[i]);
                //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");
            }
            //]]>
        </script>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451