<script type="text/javascript">
function showToolTipNewTarget(newTarget, imgPath) {
var radTooltip1 = $find("<%= RadToolTip1.ClientID %>");
radTooltip1.set_targetControlID("");
radTooltip1.set_targetControl(newTarget);
document.getElementById("MainContent_img99").src = "ProductImages/" + imgPath;
radTooltip1.show();
setTimeout(function () {
radTooltip1.show();
}, 2000);
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="acco_txt_white" width="75%" ><a href="#" id="link1" onmouseover="showToolTipNewTarget(this,'1.jpg');">Link1</a></td>
<td class="acco_txt_white" width="25%"><a href="#">Learn More</a></td>
</tr>
<tr>
<td class="acco_txt_white" width="75%" ><a href="#" id="link2" onmouseover="showToolTipNewTarget(this,'2.png');">Link2</a></td>
<td class="acco_txt_white" width="25%"><a href="#">Learn More</a></td>
</tr>
<tr>
<td class="acco_txt_white" width="75%" ><a href="#" id="link3" onmouseover="showToolTipNewTarget(this,'3.jpg');">Link3</a></td>
<td class="acco_txt_white" width="25%"><a href="#">Learn More</a></td>
</tr>
</table>
<telerik:RadToolTip runat="server" ID="RadToolTip1" RelativeTo="Element" Width="390px"
Height="70px" TargetControlID="link1" IsClientID="true" Animation="Resize" EnableShadow="true"
Position="MiddleLeft" HideEvent="LeaveTargetAndToolTip" >
<div>
<asp:Image ID="img99" runat="server" ImageUrl="~/ProductImages/1.jpg" AlternateText="solutions" />
</div>
</telerik:RadToolTip>
When I'm setting up the above code, the problem is that there is some kind of ' flicker' effect in the display of the image (it keeps appearing and disappearing at very fast intervals). At times it stays perfect as well, but most of the time I are experiencing the mentioned problem. However, if I use 3 different tool-tips for 3 different links then the images stay constant without any flicker.
Kindly help.