ToolTip Problem with imageMap

[Mike_T]

Hello,

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" />
        </asp:ImageMap>
    </div>
    <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">
        //<![CDATA[
        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; };
        }
        //]]>
    </script>
</asp:Content>

Thanks a lot for your help guys,
Mike

[Marin Bratanov]

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


Greetings,
Marin
the Telerik team