2 Answers, 1 is accepted
0
Richard
Top achievements
Rank 1
Rank 1
answered on 08 Feb 2012, 09:58 PM
Hiren:
One approach is to set RadCaptcha property EnableRefreshImage="true", but to move the image refresh link's text off-screen using CSS. Then, you can replace the link click functionality with an asp:button that features your "Refresh.png". You can associate a RadToolTip with this button and set the tooltip's display text as needed.
The JavaScript function: RefreshImage() is assigned to the "onclick" event of the button.
See the demo in action at http://screencast.com/t/EFPsQnJoGaB
Default.aspx:
Hope this helps!
One approach is to set RadCaptcha property EnableRefreshImage="true", but to move the image refresh link's text off-screen using CSS. Then, you can replace the link click functionality with an asp:button that features your "Refresh.png". You can associate a RadToolTip with this button and set the tooltip's display text as needed.
The JavaScript function: RefreshImage() is assigned to the "onclick" event of the button.
See the demo in action at http://screencast.com/t/EFPsQnJoGaB
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> <style type="text/css"> #btnRefreshImage { background: url('images/refresh.png') no-repeat 0 0; width: 25px; height: 25px; } .rcRefreshImage { text-indent:-9999px; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="ScriptManager1" runat="server"> </telerik:RadScriptManager> <script type="text/javascript"> function RefreshImage() { var captcha = $find("<%=RadCaptcha1.ClientID %>"); document.location = $get(captcha.get_id() + "_CaptchaLinkButton").href; } </script> <div> <table> <tr> <td> <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Invalid Code" ValidationGroup="Group" EnableRefreshImage="true" > </telerik:RadCaptcha> </td> <td align="left"> <telerik:RadToolTip ID="Tooltip1" runat="server" IsClientID="true" TargetControlID="btnRefreshImage" >Refresh Image</telerik:RadToolTip> <input type="button" id="btnRefreshImage" onclick="RefreshImage(); return false;" value="" /> </td> </tr> <tr> <td> <asp:Button ID="Button1" runat="server" Text="Validate Code" ValidationGroup="Group" /> </td> <td> </td> </tr> </table> </div> </form></body></html>Hope this helps!
0
Hi Hiren,
Another option is to use CSS styles in order to set an image as a background of the refresh link. Such approach is used in the online demo Captcha / Localization.
You can set the text of the displayed tooltip by changing the value of the title attribute of the Refresh Image link element via client-side script, as shown in the following code snippet:
All the best,
Slav
the Telerik team
Another option is to use CSS styles in order to set an image as a background of the refresh link. Such approach is used in the online demo Captcha / Localization.
You can set the text of the displayed tooltip by changing the value of the title attribute of the Refresh Image link element via client-side script, as shown in the following code snippet:
var captchaHtmlElement = $find("<%=RadCaptcha1.ClientID %>").get_element(); // use the ID of your captcha instead 'RadCaptcha1'$telerik.$(captchaHtmlElement).find(".rcRefreshImage").attr("title", "Custom tooltip");All the best,
Slav
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>