Tool tip showing event?

[Alan T]

Hi, 

I've got an image map, basically a map of a country, split into various regions. when i hover over each region a tooltip is displayed showing information about that region. but what i also want to do is change the image src of the imagemap when that tooltip is displayed. (ive got various images of the same country with each region shaded).

How can i achieve this ? i'd like it to be the case whether the user is over the 'area' of the imagemap or the tooltip.

[Princy]

Hello Alan,

Check the following demo where it shows how to change the image src of the imagemap when tooltip is displayed.
ToolTip / RadToolTip with ImageMap

Thanks,
Princy.

[Alan T]

Hi, i'm not sure how that example helps my issue, i can't see anywhere where the imagemap src is being changed.

Anyway i've just about given up on trying to use RadToolTip with a webservice, because i cannot get it to work (see my other thread).

I've just been looking through the examples and can't find an example of this;

  but is it possible to populate the tooltip data with an ajax postback. I've been looking for some kind of server side 'OnToolTipShow' function to handle, but can't find one. Just so i can avoid using a web service.  I see there's a ShowEvent='FromCode' perhaps this is what i want ? However, still want the tooltip to show onmouseover, which is another option for this parameter.

That way i can then easily change the src of the imagemap, and retrieve my tooltip values from the database using the postbackvalue.



EDIT: .. hold fire on this i just worked out that some things weren't firing because i had the javascript above my imagemap.

[Alan T]

Ok i'm still struggling with this. I've now mimic'd my webservice functionality in the ajaxrequest of RadToolTipManager, which is fine.

However, i'm trying to implement this rollover image .. ie replacing the image src of the imagemap.

So i'm doing that like this 

  Me.myImageMap.ImageUrl = "img/map/large/" & e.TargetControlID & ".png"

But thats not doing anything 

I've added a RadAjaxManager, like so

<telerik:RadAjaxManager ID="ram_map" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ttm_map">
<UpdatedControls>
  <telerik:AjaxUpdatedControl ControlID="myImageMap" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>


Can i not achieve it this way ? 

[Marin Bratanov]

Hello Alan,

If you wish to change the image I advise that you use the client-side events of the RadToolTipManager (and more precisely - the OnClientBeforeShow) to simply $get() the img element and change its src attribute via JavaScript, for example:

        function OnClientBeforeShow(sender, args)
        {
//            alert(sender.get_value());//to get the value, you can store the specific file name here for example
            $get("<%=MapOfEurope.ClientID %>").src = "your new image url here";
        }

This code is built on top of the RadToolTipManager with ImageMap online demo, so you should be able to easily incorporate it there as you have the online demos installed locally - you can find them in the LiveDemos folder in the RadControls installation. I also advise that you examine the demo carefully due to the large number of limitations of the image map.

As for your issue with AJAX - the OnAjaxUpdate event of the RadToolTipManager only updates it content and therefore other changes to the page are not sent to the client. This is a general situation with AJAX. If you insist on using server-side code you can place the image map in an update panel with updatemode set to conditional and call its update method in the code-behind, but I cannot guarantee that the tooltips will continue functioninig, since this way the control will be disposed and the handlers attached to the areas will be lost.

Regards,
Marin
the Telerik team

[Alan T]

Yeah thanks Marin. I ended up using the OnClientBeforeShow, to change my imagemaps src, and used the AjaxRequest to populate hte ToolTip with my data.