Display Text on Label Control while onmouseover on Image in ASP.Net

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:

Display Text on Label while onmouseover on Image in ASP.Net with C#

Display Text on Label while onmouseover on Image in ASP.Net with C#

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:

Display Text on Label while onmouseover on Image in ASP.Net with C#

Display Text on Label while onmouseover on Image in ASP.Net with C#

I hope this ASP.Net with JavaScript events Example of onmouseover javascript event will help you…..

Leave a Reply

Your email address will not be published. Required fields are marked *

1 + 4 =


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">