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

ToolTip Problem with imageMap

1 Answer 28 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Mike_T asked on 16 Jul 2011, 08:25 AM

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,

1 Answer, 1 is accepted

Sort by
Marin Bratanov
Telerik team
answered on 19 Jul 2011, 01:45 PM
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!

Asked by
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question