Tool tip showing event?

6 posts, 1 answers
  1. Alan T
    Alan T avatar
    125 posts
    Member since:
    Apr 2010

    Posted 29 Sep 2011 Link to this post


    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Sep 2011 Link to this post

    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

  3. Alan T
    Alan T avatar
    125 posts
    Member since:
    Apr 2010

    Posted 30 Sep 2011 Link to this post

    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.
  4. Alan T
    Alan T avatar
    125 posts
    Member since:
    Apr 2010

    Posted 03 Oct 2011 Link to this post

    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">
    <telerik:AjaxSetting AjaxControlID="ttm_map">
      <telerik:AjaxUpdatedControl ControlID="myImageMap" />

    Can i not achieve it this way ? 
  5. Answer
    Marin Bratanov
    Marin Bratanov avatar
    3915 posts

    Posted 04 Oct 2011 Link to this post

    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.

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Alan T
    Alan T avatar
    125 posts
    Member since:
    Apr 2010

    Posted 06 Oct 2011 Link to this post

    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.

Back to Top