Tool Tip And Image Map

3 posts, 0 answers
  1. Joseph
    Joseph avatar
    3 posts
    Member since:
    Apr 2008

    Posted 26 Jun 2008 Link to this post

    Hello,

    I'm currently working with the telerik tooltip image map project.  Now my question is.  I m trying to take the tooltip click event from the ascx contoller and insert into my default.aspx page.  I do not want to use the rapopen window or popup.  I simply want to click on the tooltip link over the imagemap and have it insert into the aspx listbox.  I have tried using javascript to do this, but for some reason I cant pass the object over.  Please help. 

    Thanks,

    Mark
  2. Mark
    Mark avatar
    1 posts
    Member since:
    Jun 2008

    Posted 26 Jun 2008 Link to this post

    Hello Telerik Team,

    I should have provided some code for the above mentioned problem.  Here is my ascx code and below that is my aspx code.  


    ascx here:

    <%

    @Control Language="C#" CodeFile="Customers.ascx.cs" Inherits="Telerik.Web.Examples.ToolTip.ImageMapToolTipManager.Customers" %>

    <

    script type="text/javascript">

    function

    GetSome()

    {

    alert(

    this.innerHTML);

    }

    </

    script>

    <

    form id="MyReturn" runat="server">

    <

    h4 style="font-size: 14px; padding: 0; margin: 0 0 4px 0; color: #59b112; border-bottom: solid 1px #59b112;">Customers</h4>

    <

    ul style="padding: 0; margin: 0;">

    <asp:Repeater ID="Repeater1" runat="server" >

    <ItemTemplate>

    <li style="list-style: none;">

    <

    <

    a onclick="displaymessage(alert(this.innerHTML));" href="#" class="customer"><%# Eval("CodeID") %> - <%# Eval("CodeName") %> </a></li>

    <%

    --radopen('DetailsView.aspx?id=<%# Eval("CodeID") %>',null); return false;"--%>

    </ItemTemplate>

    </asp:Repeater>

    </ul>

    </

    form>





    aspx here:

    <%

    @ 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" %>

    <!

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

    <style type="text/css">

    a.customer

    {

    color: #59b112;

    text-decoration: none;

    margin-left:4px;

    }

    a.customer:hover

    {

    color:black;

    }

    </style>

    </

    head>

    <

    body class="BODY">

    <form id="form1" runat="server">

    <input type ="button" value="Click Me" onclick="displaymessage()" />

    <asp:ListBox ID="ListBox2" runat="server">

    <

    asp:ListItem>Vasnth</asp:ListItem>

    <

    asp:ListItem>Kumar</asp:ListItem>

    </

    asp:ListBox>

    <

    asp:Button ID="Button1" runat="server" Text="Add" OnClientClick="return Add();" />

    <asp:ScriptManager ID="ScriptManager" runat="server" />

    <telerik:RadWindowManager

    Skin="Hay"

    ID="RadWindowManager1"

    Modal="true"

    runat="server"

    Width="650"

    Height="600"

    VisibleStatusbar="false"

    DestroyOnClose="true">

    </telerik:RadWindowManager>

    <asp:ImageMap ID="BodyFront" ImageUrl="Img/body1.gif" runat="server">

    <asp:RectangleHotSpot Right="200" Top="10" Bottom="5" AlternateText="Brain or Head"/>

    <asp:RectangleHotSpot Right="200" Top="80" Bottom="5" AlternateText="Soft Tissue Neck" />

    <asp:RectangleHotSpot Left ="150" Top="90" Right="200" Bottom="150" AlternateText="Thorax Chest" />

    <%

    -- <asp:RectangleHotSpot Left ="150" Top="120" Right="200" Bottom="210" AlternateText="Abdomen" />

    <asp:RectangleHotSpot Left ="150" Top="220" Right="200" Bottom="240" AlternateText="Pelvis" />

    <asp:RectangleHotSpot Left ="150" Top="220" Right="200" Bottom="240" AlternateText="Ear" />

    <asp:RectangleHotSpot Left ="150" Top="220" Right="200" Bottom="240" AlternateText="Maxillofacial" />

    <asp:RectangleHotSpot Left ="150" Top="220" Right="200" Bottom="240" AlternateText="Upper Extremities" />

    <asp:RectangleHotSpot Left ="150" Top="220" Right="200" Bottom="240" AlternateText="Lower Extremities" />--

    %>

    </asp:ImageMap>

    <telerik:RadToolTipManager ID="RadToolTipManager1"

    style="z-index:1000"

    ShowCallout="false"

    Skin="Telerik"

    RelativeTo="Mouse"

    Position="Center"

    Animation="Fade"

    Width="150px"

    Height="150px"

    ContentScrolling="Auto"

    runat="server">

    <WebServiceSettings Method="GetCustomersByCountry" Path="ToolTipWebService.asmx" />

    </telerik:RadToolTipManager>

    <asp:ListBox ID="ListBox1" runat="server"

    AutoPostBack="True" Height="272px" Width="576px">

    </asp:ListBox>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AutoGenerateSelectButton="true">

    </asp:GridView>

    <script type="text/javascript">

    //var countryArray = new Array("Austria","Belgium","Denmark","Finland","France","Germany","Ireland","Italy","Norway","Poland","Portugal","Spain","Sweden","Switzerland","UK");

    var countryArray = new Array("Brain or Head","Soft Tissue Neck","Thorax Chest");//,"Abdomen","Pelvis", "Ear", "Maxillofacial", "Upper Extremities", "Lower Extremities" );

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

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

    var map = document.getElementsByName("ImageMapBodyFront")[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>

    </form>

    </

    body>

    <%

    --<script type="text/javascript" language="javascript">--%>

    <%

    --

    //function Add()

    //{

    //var drop = document.getElementById("ListBox1");

    //var newItem = //document.getElementById("Repeater1").childNodes; //prompt("Enter New Item");

    var listItem = new Option(newItem,newItem, false, false);

    drop.options[drop.length]= newItem;

    return false;

    }

    </script>--

    %>

    <

    script type="text/javascript">

    function

    displaymessage() //txt)

    {

    //var _rep = document.getElementById('CodeID').innerHTML="DefaultCS.aspx";

    //var _rep = alert(this.innerHTML="Customer.ascx");

    //var locate = window.location;

    //document.location.form1.value = locate;

    //var holder = document.location.form1.value;

    //var _box = document.getElementsByName("ListBox1").item(alert("Hello There"));

    //var s = document.getElementById('form1');

    //String. o = "Whats Going On Over Here!";

    //var o = this.innerHTML="Customer.ascx";

    //alert(o);

    //s.options[s.options.length]=o;<a href="~/UserControls/Customers.ascx">~/UserControls/Customers.ascx</a>

    /*document.appendChild.Customer.ascx($find.callBaseMethod(Repeater1)*/

    //"CodeID";

    //o.value = "test";

    var o = document.createElement("option");

    var tooltip = $find("<%= RadToolTipManager1.ClientID%>");

    o.text =

    "CodeID: " + tooltip + "CodeName: ";

    document.getElementById(

    "ListBox1").add(o);

    return

    true;

    }

    </

    script>

     

    </

    html>


    I would really appreciate the help.  I tried using javascript, but I just cant seem to get that click event from the ascx page to insert into the listbox1 on my aspx page.  Again I'd appreciate any help or direction on this. 

    Thank you Telerik Team,

    Mark

  3. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Jun 2008 Link to this post

    Hi guys,

    I suggest to examine the following online demos:

    http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/ImageMapToolTipManager/DefaultCS.aspx

    http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/UsingWithImageMap/DefaultCS.aspx

    If you experience problems, please open a new support ticket and send us a sample, fully runnable project (DB included if needed) along with a detailed explanation of the experienced problems and the desired behavior. Once I receive it, I will do my best to help.


    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top