ToolTip Problem with imageMap

2 posts, 1 answers
  1. Mike_T
    Mike_T avatar
    37 posts
    Member since:
    Aug 2006

    Posted 16 Jul 2011 Link to this post


    I'm trying to implement the radtooltip inside a page but once i load the page i get the following javascript error
    "Microsoft JScript runtime error: 'map' is null or not an object"

    please find below my code:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TripoliActivities.aspx.vb"
        Inherits="BeitElYasmine._TripoliActivities" MasterPageFile="~/MasterPages/FrontEnd.Master" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
        <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"></telerik:RadAjaxPanel>
       <div style="text-align: center">
    <asp:ImageMap ID="ImageMap1" HotSpotMode="Navigate" ImageUrl="Img/FloorPlan.jpg"
    AlternateText="FloorPlan" runat="server">
                <asp:PolygonHotSpot Coordinates="36,221,36,304,134,304,134,278,228,278,228,304,359,304,359,279,349,228,346,205,301,205,301,34,36,34,36,221" />
                <asp:PolygonHotSpot Coordinates="301,34,490,34,490,151,301,149,301,34" />
                <asp:PolygonHotSpot Coordinates="301,149,301,204,347,204,350,225,470,225,470,152,301,149" />
                <asp:PolygonHotSpot Coordinates="350,226,360,289,469,289,469,226,350,226" />
        <telerik:RadToolTip ID="tooltip" RelativeTo="Mouse" runat="server" TargetControlID="area0"
            Animation="FlyIn" Position="BottomCenter" IsClientID="true" ShowCallout="false" EnableShadow="true">
            <img src="Img/livingRoom.jpg" alt="LivingRoom" /></telerik:RadToolTip>
        <telerik:RadToolTip ID="RadToolTip1" RelativeTo="Mouse" runat="server" TargetControlID="area1"
            Animation="FlyIn" Position="TopRight" IsClientID="true" ShowCallout="false" EnableShadow="true">
            <img src="Img/kitchen.jpg" alt="Kitchen" /></telerik:RadToolTip>
        <telerik:RadToolTip ID="RadToolTip2" RelativeTo="Mouse" runat="server" TargetControlID="area2"
            Animation="FlyIn" Position="MiddleRight" IsClientID="true" ShowCallout="false" EnableShadow="true">
            <img src="Img/bathroom.jpg" alt="Bathroom" /></telerik:RadToolTip>
        <telerik:RadToolTip ID="RadToolTip3" RelativeTo="Mouse" runat="server" TargetControlID="area3"
            Animation="FlyIn" Position="BottomRight" IsClientID="true" ShowCallout="false" EnableShadow="true">
            <img src="Img/entrance.jpg" alt="Entrance" /></telerik:RadToolTip>
        <script type="text/javascript">
            var map = document.getElementsByName("ImageMapImageMap1")[0];
            var areas = map.getElementsByTagName("AREA");
            for (var i = 0; i < areas.length; i++) {
                var area = areas[i];
                area.setAttribute("id", "area" + i);
                //Prevent from postbacking the page 
                area.onclick = function(e) { return false; };

    Thanks a lot for your help guys,
  2. Answer
    Marin Bratanov
    Marin Bratanov avatar
    3899 posts

    Posted 19 Jul 2011 Link to this post

    Hello Mike,

    This code is intended to work in a simple aspx page where no INaming container is involved, since it relies on hardcoding the name of the image map in order to access it. In your case you are using a master page, which changes the ids and therefore the getElementsByName() method cannot find the old id. To work around this you can set the ClientIDMode property of the ImageMap to Static (or find another way to reference the image map, of course).

    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top