how to make mouse over event in ASP.net

**PRR** · Feb 10 '09, 06:44 AM

The most convenient way is to use JavaScript...

Code:

TextBox1.Attributes.Add("onkeyup", "document.getElementById('TextBox2').value= document.getElementById(this.id).value;");

Otherwise you will have to write the code in some server side event ...

Code:

protected void ServerControl_Click(object sender, EventArgs e)
    {
        TextBox2.Text = TextBox1.Text;
    }

any reasons for not using JavaScript?

**avinash sh** · Feb 10 '09, 07:42 AM

ok thanx.,,,,, i'll try that one..thanx fr help,,, but in 2nd solution how to create server side event .....?i want mouse over event not a click event..

**PRR** · Feb 10 '09, 08:46 AM

Originally posted by avinash sh

ok thanx.,,,,, i'll try that one..thanx fr help,,, but in 2nd solution how to create server side event .....?i want mouse over event not a click event..

use java scripts... You cant fire server side code for mouse hover or other client side without the help of java script...

**Frinavale** · Feb 10 '09, 02:51 PM

Originally posted by avinash sh

hi.. i am using a textbox1 who contain some text.. and i have another textbox2 where i want to display the text of textbox1 on mouseover of textbox1.... plz suggest me how could it possible without using java script..?plz help?and i am using asp.net 3.5

This is all doable client side.
There's no need to make an expensive server side call.

All you have to do is retrieve the text from TextBox1 and display it above TextBox2 (I think you meant this) when the mouse hovers over it right?

Place a Label above your TextBox2 that will be used to display the text.
Labels are rendered as <span>s. Write JavaScript that will retrieve the text from TextBox1 and place that in the inner html of the label (the <span>).

Here's pure HTML/JavaScript:

Code:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
    var theText = document.getElementById("myTextBox1").value;
    document.getElementById("myLabel").innerHTML = theText;

}
function mouseOut()
{
     document.getElementById("myLabel").innerHTML = "";
}
</script>
</head>

<body>
<input type="text" value="some text in my text box 1" id="myTextBox1" />
<br />
<br />
<br />
<span id="myLabel"></span><br />
<input type="text" value="" id="myTextBox2" onmouseover="mouseOver();" onmouseout="mouseOut();"/>


</body>
</html>

If this were ASP.NET code you'd have to retrieve the ClientID of the TextBox1 control and the ClientID of the Label control. To do this you can use ASP to write the value directly into the script:

Code:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
    var theText = document.getElementById("<%=myTextBox1.ClientID%>").value;
    document.getElementById("<%=myLabel.ClientID%>").innerHTML = theText;

}
function mouseOut()
{
     document.getElementById("<%=myLabel.ClientID%>").innerHTML = "";
}
</script>
</head>

<body>
<asp:TextBox ID="myTextBox1" runat="server" />
<br />
<br />
<br />
<asp:Label id="myLabel" runat="server"></asp:Label><br />
<asp:TextBox ID="myTextBox2" runat="server" onmouseover="mouseOver();" onmouseout="mouseOut();"  />


</body>
</html>

If you wanted to execute server side code for some reason during the mouse over event, then you would have to implement an Ajax Call to a method on the server. You'll have to learn how to use Ajax to do this.

how to make mouse over event in ASP.net

how to make mouse over event in ASP.net

Comment

Comment

Comment

Comment