How to change LinkButton forecolor in mouse over event

  • Thread starter Thread starter moondaddy
  • Start date Start date
M

moondaddy

in asp.net 2.0, i have a link buttonand want to change the forecolor in a
mouse over event. how can I do this?
 
OK Thanks.

I tried this but the style doesnt seem to effect it:

<style>


..clsHomePgLinkBtnNormal {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }

..clsHomePgLinkBtnMouseOver {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }

</style>



<asp:LinkButton ID="LinkButton1" runat="server"

onmouseover="LinkBtnMouseOver(this)"

onmouseout="LinkBtnMouseOut(this)"
LinkButton</asp:LinkButton>
Click to expand...


I put a debugger in here and the code executes with no error, but doesnt
have any effect on the link button's forecolor.

any suggestions?


Nathan Sokalski said:
To do this you would use JavaScript to change the color using CSS.
Click to expand...
 
Best way is to emit javascript after querying the control for its post back
event. I do not have a sample, but a google search should reveal something.
You can fudge the JavaScript with the control name in source, but you will
blow up if you change the location of the control (like move to a control in
the page). If you query the control, it will always give you the current
control name, regardless of position.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA
http://gregorybeamer.spaces.live.com

*********************************************
Think outside the box!
*********************************************
 
Thanks.

I think I know what the problem is, but I don't know the solution. the
mouseover event is calling a function which sets the css class. but the
color property has no effect on the button. If I change the font size in
the css class I can see this take effect in the mouseover event. I also
tried setting the forecolor via jscript with no luck.

<asp:LinkButton ID="LinkButton1" runat="server"
onmouseover="LinkBtnMouseOver(this)"
onmouseout="LinkBtnMouseOut(this)"
Home</asp:LinkButton>
Click to expand...

I debugged it and this passes in a correct reference to the link button.
the function calls the css class like this:


<script language="JavaScript" fptype="dynamicanimation">
function LinkBtnMouseOver(e)
{
debugger;
e.className='clsHomePgLinkBtnMouseOver';
e.ForeColor="Aqua"
}
function LinkBtnMouseOut(e)
{
e.className='clsHomePgLinkBtnNormal';
e.ForeColor="White"
}

//-->
</script>

and here's the style in the page:


<style>
.clsHomePgLinkBtnNormal {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }
.clsHomePgLinkBtnMouseOver {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }
</style>

seems like it should work but the for color does not change.



Cowboy (Gregory A. Beamer) said:
Best way is to emit javascript after querying the control for its post
back event. I do not have a sample, but a google search should reveal
something. You can fudge the JavaScript with the control name in source,
but you will blow up if you change the location of the control (like move
to a control in the page). If you query the control, it will always give
you the current control name, regardless of position.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA
http://gregorybeamer.spaces.live.com

*********************************************
Think outside the box!
*********************************************
Click to expand...
 
OK I got it:

I need to change the element's style in javascript like this:


function LinkBtnMouseOver(e)
{
e.style.color="aqua";
}
function LinkBtnMouseOut(e)
{
e.style.color="white";
}




moondaddy said:
Thanks.

I think I know what the problem is, but I don't know the solution. the
mouseover event is calling a function which sets the css class. but the
color property has no effect on the button. If I change the font size in
the css class I can see this take effect in the mouseover event. I also
tried setting the forecolor via jscript with no luck.

<asp:LinkButton ID="LinkButton1" runat="server"
onmouseover="LinkBtnMouseOver(this)"
onmouseout="LinkBtnMouseOut(this)"
Home</asp:LinkButton>
Click to expand...

I debugged it and this passes in a correct reference to the link button.
the function calls the css class like this:


<script language="JavaScript" fptype="dynamicanimation">
function LinkBtnMouseOver(e)
{
debugger;
e.className='clsHomePgLinkBtnMouseOver';
e.ForeColor="Aqua"
}
function LinkBtnMouseOut(e)
{
e.className='clsHomePgLinkBtnNormal';
e.ForeColor="White"
}

//-->
</script>

and here's the style in the page:


<style>
.clsHomePgLinkBtnNormal {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }
.clsHomePgLinkBtnMouseOver {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }
</style>

seems like it should work but the for color does not change.
Click to expand...
 
The problem is you are not setting the right properties (you are trying to
set properties of a server control, but you should be setting properties of
the generated HTML element). try the following:

function LinkBtnMouseOver(e)
{
e.className='clsHomePgLinkBtnMouseOver';
e.style.color='Aqua';
}

You may also find the following site useful:

http://codepunk.hardwar.org.uk/css2js.htm

Good Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

moondaddy said:
Thanks.

I think I know what the problem is, but I don't know the solution. the
mouseover event is calling a function which sets the css class. but the
color property has no effect on the button. If I change the font size in
the css class I can see this take effect in the mouseover event. I also
tried setting the forecolor via jscript with no luck.

<asp:LinkButton ID="LinkButton1" runat="server"
onmouseover="LinkBtnMouseOver(this)"
onmouseout="LinkBtnMouseOut(this)"
Home</asp:LinkButton>
Click to expand...

I debugged it and this passes in a correct reference to the link button.
the function calls the css class like this:


<script language="JavaScript" fptype="dynamicanimation">
function LinkBtnMouseOver(e)
{
debugger;
e.className='clsHomePgLinkBtnMouseOver';
e.ForeColor="Aqua"
}
function LinkBtnMouseOut(e)
{
e.className='clsHomePgLinkBtnNormal';
e.ForeColor="White"
}

//-->
</script>

and here's the style in the page:


<style>
.clsHomePgLinkBtnNormal {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }
.clsHomePgLinkBtnMouseOver {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }
</style>

seems like it should work but the for color does not change.
Click to expand...
 
Back
Top