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

Tooltips on hyperlinked image

2 Answers 31 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jason BBG
Top achievements
Rank 1
Jason BBG asked on 06 May 2010, 11:21 AM
Hi there. Newbie, non-developer type bod here with a query please. I work in Support and have a customer reporting the following issue with the editor:

1. Insert an image into a web page
2. Select the image and use the Hyperlink Editor to link it to a URL and also to add a tooltip

Results: the image is hyperlinked but no tooltip will appear. This is because (if you look at the html code) the title tag is inserted before the img tag for the image and is therefore not read. You can workaround this by selecting the image and choosing the Image Editor to add alt text (which is correctly placed inside the img tag), but should the user be expected to do this?

Is this a bug in Telerik in that tooltips do not work for hyperlinked images? Or is it a fault with the way that IE reads the code\tags?

Thanks for your help, Jason

2 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 11 May 2010, 02:34 PM
Hi Jason,

This problem is not directly related to RadEditor but to the way Internet Explorer behaves. In order to provide a XHTML compliant output, RadEditor inserts an alt attribute to the images inside the content area - if an alt text is not defined, an empty string is provided to the alt attribute. In Internet Explorer, when hovering an image which is inside an A tag, the image's alt attribute is displayed instead of the link's target attribute.

I would recommend providing an Alt Text to the images added inside RadEditor's content, and if that image is inside a that Alt Text should match the link's title attribute.

As an alternative solution I suggest you to examine the RadEditor's content and apply Alt Text to the all images inside links. This can be achieved with the following sample code:
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientSubmit="OnClientSubmit">
    </Content>
</telerik:RadEditor>
<asp:Button ID="Button1" runat="server" Text="Button" />
<script type="text/javascript">
    function OnClientSubmit(editor, args)
    {
        //get reference to RadEditor's content area document
        var oDoc = editor.get_document();
        //get reference to the links inside RadEditor's content area
        var links = oDoc.getElementsByTagName("a");
 
        for (var i = 0; i < links.length; i++)
        {
            var link = links[i];
            //get links title
            var linkTitle = link.getAttribute("title");
            //check if a link has title set and if it contains only 1 image
            if (link.getElementsByTagName("img").length == 1 && linkTitle != "")
            {
                //set link's title as an alt to the image
                link.getElementsByTagName("img")[0].setAttribute("alt", linkTitle);
            }
        }
    }
</script>


All the best,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Jason BBG
Top achievements
Rank 1
answered on 11 May 2010, 03:21 PM
Thanks for the reply Dobromir. I'll present this to the Developers :)

Best regards, Jason
Tags
Editor
Asked by
Jason BBG
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Jason BBG
Top achievements
Rank 1
Share this question
or