Tool Tip And Image Map

[Joseph]

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

[Mark]

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

[Svetlina Anati]

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