Hi, In this ASP.Net tutorials we will learn How to display a label value while mouse over on Image control in ASP.Net.
The ASP.Net Example show when our mouse is on Image control at that time the Label Control display text value which we desire.
There are many javascript events like javascript onmouseover, asp.net onclick javascript……
We are doing this ASP.Net Example using the JavaScript onmouseover() and onmouseout() Function.
STEP 1 – Design the ASP.Net web page with One Image Control and Two Label Control :
<table style=”width: 568px”>
<tr>
<td colspan=”2″ style=”text-align: center”>
<strong><span style=”font-size: 14pt; color: #9900ff”>Display Value onmouseover event
in ASP.Net</span></strong></td>
</tr>
<tr>
<td style=”width: 100px”>
<asp:Image ID=”Image2″ onmouseout=”funout()” onmouseover=”funover()” runat=”server” ImageUrl=”~/Example/meera.jpg” /></td>
<td style=”width: 99px”>
<asp:Panel ID=”Panel1″ runat=”server” CssClass=”rd” Height=”49px” Width=”152px” >
<asp:Label ID=”lblname” runat=”server” Font-Bold=”True” Font-Size=”Large” ForeColor=”#404040″></asp:Label></asp:Panel>
</td>
</tr>
<tr>
<td style=”width: 100px”>
<asp:Label ID=”Label1″ runat=”server” Text=”Meera Academy” /></td>
<td style=”width: 99px”>
</td>
</tr>
</table>
The ASP.Net Example onmouseover function design layout is:
STEP 2 – write the below JavaScript code in <Head> Section of ASP.Net webpage:
<head runat=”server”>
<title>Display text on label while onmouseover</title>
<script type=”text/javascript”>
function funover()
{
var name = document.getElementById(‘Label1’).innerHTML;
var pnl = document.getElementById(‘Panel1’).setAttribute(‘style’,’border-color:Gray;border-width:1px;border-style:Solid;height:49px;width:152px;’);
document.getElementById(‘<%= lblname.ClientID %>’).innerHTML=name;
}
function funout()
{
document.getElementById(‘<%= lblname.ClientID %>’).innerHTML=”;
var pnl = document.getElementById(‘Panel1’).setAttribute(‘style’,’height:49px;width:152px;’);
}
</script>
</head>
After Doing this The Label show the Name while your mouse on over image control.
The ASP.Net Example of Display text on Label Control while onmouseover output is:
I hope this ASP.Net with JavaScript events Example of onmouseover javascript event will help you…..