|
 |
aspx_beginners thread: hyperlink web control mouseover event
Message #1 by "John Tyson" <jtyson@t...> on Mon, 10 Jun 2002 09:31:08 -0700
|
|
Hi,
Events such as OnMouseOver are not supported for web controls such as
asp:Hyperlink.
I came across a post describing how to capture the onmouseover event
using javascript, by adding something similar to
HLnk1.Attributes.Add("onmouseover","javascript:alert('MouseOver');") in
the Page Load.
I am not a javascript programmer, and instead of opening a box with an
"OK" button on it every time the mouseover happens, how can I instead
simply change the link text color to red?
Thanks in advance,
John
Message #2 by Imar Spaanjaars <Imar@S...> on Mon, 10 Jun 2002 20:14:07 +0200
|
|
Hi John
There are a few ways to do this, but most of them require "modern" browsers
to do it.
The first solution that comes to mind is to use Cascading Style Sheets.
Define an element A:Hover in a stylesheet or inline and all your links will
change automatically when you "mouse over" them.
A:Hover
{
color : red;
}
Another option is to use JavaScript. Here is an example of using in-line
JavaScript:
<a href="test.html" onmouseover="this.style.color='red';"
onmouseout="this.style.color='black';">Test Me</a>
You could also let onmouseover and onmouseout call a separate function, if
you'd need to change more than just the color. Theoretically, you can add
lots of JavaScript code in-line to the onmouseover and other events, but
IMO, this will become rather messy.
So, here is an alternative:
<script language="JavaScript" type="text/javascript">
function changeColor(objectToColor, sColorName)
{
objectToColor.style.color = sColorName;
}
</script>
<a href="test.html" onmouseover="changeColor(this, 'red');"
onmouseout="changeColor(this, 'black');">Test Me</a>
Passing "this" effectively passes a reference to the current object, which
is the a href in this case. However, this function can be used for lots of
elements that support the style.color property.
HtH
Imar
At 09:31 AM 6/10/2002 -0700, you wrote:
>Hi,
>
>Events such as OnMouseOver are not supported for web controls such as
>asp:Hyperlink.
>
>I came across a post describing how to capture the onmouseover event
>using javascript, by adding something similar to
>HLnk1.Attributes.Add("onmouseover","javascript:alert('MouseOver');") in
>the Page Load.
>
>I am not a javascript programmer, and instead of opening a box with an
>"OK" button on it every time the mouseover happens, how can I instead
>simply change the link text color to red?
>
>Thanks in advance,
>
>John
Message #3 by David Barnes <DavidB@w...> on Tue, 11 Jun 2002 11:24:14 +0100
|
|
Hi John
There is a much easier way to do this. Try this bit of HTML:
<html>
<style>
<!--
a:hover {color: red}
-->
</style>
<body>
<a href="http://www.wrox.com">Changes to Red</a>
</body>
</html>
In this document, every link will turn red when the mouse hovers over it. If
you only want it to work on a few links, try this:
<html>
<style>
<!--
a:hover.special {color: red}
-->
</style>
<body>
<a href="http://www.wrox.com" class="special">Changes to Red</a>
<a href="http://www.webmonkey.com">Stays Blue</a>
</body>
</html>
This is using stylesheets. For more general information on stylesheets, have
a look at Webmonkey:
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/index.html
I hope this helps.
David
Editor, Wrox Press
> -----Original Message-----
> From: Imar Spaanjaars [mailto:Imar@S...]
> Sent: 10 June 2002 19:14
> To: aspx_beginners
> Subject: [aspx_beginners] Re: hyperlink web control mouseover event
>
>
> Hi John
>
> There are a few ways to do this, but most of them require
> "modern" browsers
> to do it.
>
> The first solution that comes to mind is to use Cascading
> Style Sheets.
> Define an element A:Hover in a stylesheet or inline and all
> your links will
> change automatically when you "mouse over" them.
>
> A:Hover
> {
> color : red;
> }
>
>
> Another option is to use JavaScript. Here is an example of
> using in-line
> JavaScript:
>
> <a href="test.html" onmouseover="this.style.color='red';"
> onmouseout="this.style.color='black';">Test Me</a>
>
> You could also let onmouseover and onmouseout call a separate
> function, if
> you'd need to change more than just the color. Theoretically,
> you can add
> lots of JavaScript code in-line to the onmouseover and other
> events, but
> IMO, this will become rather messy.
>
> So, here is an alternative:
>
> <script language="JavaScript" type="text/javascript">
> function changeColor(objectToColor, sColorName)
> {
> objectToColor.style.color = sColorName;
> }
> </script>
>
> <a href="test.html" onmouseover="changeColor(this, 'red');"
> onmouseout="changeColor(this, 'black');">Test Me</a>
>
> Passing "this" effectively passes a reference to the current
> object, which
> is the a href in this case. However, this function can be
> used for lots of
> elements that support the style.color property.
>
> HtH
>
> Imar
>
>
>
>
> At 09:31 AM 6/10/2002 -0700, you wrote:
> >Hi,
> >
> >Events such as OnMouseOver are not supported for web controls such as
> >asp:Hyperlink.
> >
> >I came across a post describing how to capture the onmouseover event
> >using javascript, by adding something similar to
> >HLnk1.Attributes.Add("onmouseover","javascript:alert('MouseOv
er');") in
> >the Page Load.
> >
> >I am not a javascript programmer, and instead of opening a
> box with an
> >"OK" button on it every time the mouseover happens, how can I instead
> >simply change the link text color to red?
> >
> >Thanks in advance,
> >
> >John
>
>
>
>
Message #4 by Imar@S... on Tue, 11 Jun 2002 20:10:35
|
|
Hi David,
I looked and looked but can't seem to find a difference between my first
suggestion and your "much easier" suggestion......... ;-)
Imar
> Hi John
There is a much easier way to do this. Try this bit of HTML:
<html>
<style>
<!--
a:hover {color: red}
-->
</style>
<body>
<a href="http://www.wrox.com">Changes to Red</a>
</body>
</html>
In this document, every link will turn red when the mouse hovers over it.
If
you only want it to work on a few links, try this:
<html>
<style>
<!--
a:hover.special {color: red}
-->
</style>
<body>
<a href="http://www.wrox.com" class="special">Changes to Red</a>
<a href="http://www.webmonkey.com">Stays Blue</a>
</body>
</html>
This is using stylesheets. For more general information on stylesheets,
have
a look at Webmonkey:
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/index.html
I hope this helps.
David
Editor, Wrox Press
> -----Original Message-----
> From: Imar Spaanjaars [mailto:Imar@S...]
> Sent: 10 June 2002 19:14
> To: aspx_beginners
> Subject: [aspx_beginners] Re: hyperlink web control mouseover event
>
>
> Hi John
>
> There are a few ways to do this, but most of them require
> "modern" browsers
> to do it.
>
> The first solution that comes to mind is to use Cascading
> Style Sheets.
> Define an element A:Hover in a stylesheet or inline and all
> your links will
> change automatically when you "mouse over" them.
>
> A:Hover
> {
> color : red;
> }
>
>
> Another option is to use JavaScript. Here is an example of
> using in-line
> JavaScript:
>
> <a href="test.html" onmouseover="this.style.color='red';"
> onmouseout="this.style.color='black';">Test Me</a>
>
> You could also let onmouseover and onmouseout call a separate
> function, if
> you'd need to change more than just the color. Theoretically,
> you can add
> lots of JavaScript code in-line to the onmouseover and other
> events, but
> IMO, this will become rather messy.
>
> So, here is an alternative:
>
> <script language="JavaScript" type="text/javascript">
> function changeColor(objectToColor, sColorName)
> {
> objectToColor.style.color = sColorName;
> }
> </script>
>
> <a href="test.html" onmouseover="changeColor(this, 'red');"
> onmouseout="changeColor(this, 'black');">Test Me</a>
>
> Passing "this" effectively passes a reference to the current
> object, which
> is the a href in this case. However, this function can be
> used for lots of
> elements that support the style.color property.
>
> HtH
>
> Imar
>
Message #5 by David Barnes <DavidB@w...> on Wed, 12 Jun 2002 13:14:23 +0100
|
|
Imar
You're absolutely right. I thought I was replying to John's mail... I hadn't
even noticed yours, or that I was actually replying to it! :)
John -- sorry if this has confused you. Imar's first suggestion and my
suggestion are basically the same.
David
> -----Original Message-----
> From: Imar@S... [mailto:Imar@S...]
> Sent: 11 June 2002 21:11
> To: aspx_beginners
> Subject: [aspx_beginners] Re: hyperlink web control mouseover event
>
>
> Hi David,
>
> I looked and looked but can't seem to find a difference
> between my first
> suggestion and your "much easier" suggestion......... ;-)
>
>
> Imar
>
>
>
> > Hi John
>
> There is a much easier way to do this. Try this bit of HTML:
>
> <html>
> <style>
> <!--
> a:hover {color: red}
> -->
> </style>
> <body>
> <a href="http://www.wrox.com">Changes to Red</a>
> </body>
> </html>
>
> In this document, every link will turn red when the mouse
> hovers over it.
> If
> you only want it to work on a few links, try this:
>
> <html>
> <style>
> <!--
> a:hover.special {color: red}
> -->
> </style>
> <body>
> <a href="http://www.wrox.com" class="special">Changes to Red</a>
> <a href="http://www.webmonkey.com">Stays Blue</a>
> </body>
> </html>
>
> This is using stylesheets. For more general information on
> stylesheets,
> have
> a look at Webmonkey:
>
> http://hotwired.lycos.com/webmonkey/authoring/stylesheets/index.html
>
> I hope this helps.
>
> David
>
> Editor, Wrox Press
>
> > -----Original Message-----
> > From: Imar Spaanjaars [mailto:Imar@S...]
> > Sent: 10 June 2002 19:14
> > To: aspx_beginners
> > Subject: [aspx_beginners] Re: hyperlink web control mouseover event
> >
> >
> > Hi John
> >
> > There are a few ways to do this, but most of them require
> > "modern" browsers
> > to do it.
> >
> > The first solution that comes to mind is to use Cascading
> > Style Sheets.
> > Define an element A:Hover in a stylesheet or inline and all
> > your links will
> > change automatically when you "mouse over" them.
> >
> > A:Hover
> > {
> > color : red;
> > }
> >
> >
> > Another option is to use JavaScript. Here is an example of
> > using in-line
> > JavaScript:
> >
> > <a href="test.html" onmouseover="this.style.color='red';"
> > onmouseout="this.style.color='black';">Test Me</a>
> >
> > You could also let onmouseover and onmouseout call a separate
> > function, if
> > you'd need to change more than just the color. Theoretically,
> > you can add
> > lots of JavaScript code in-line to the onmouseover and other
> > events, but
> > IMO, this will become rather messy.
> >
> > So, here is an alternative:
> >
> > <script language="JavaScript" type="text/javascript">
> > function changeColor(objectToColor, sColorName)
> > {
> > objectToColor.style.color = sColorName;
> > }
> > </script>
> >
> > <a href="test.html" onmouseover="changeColor(this, 'red');"
> > onmouseout="changeColor(this, 'black');">Test Me</a>
> >
> > Passing "this" effectively passes a reference to the current
> > object, which
> > is the a href in this case. However, this function can be
> > used for lots of
> > elements that support the style.color property.
> >
> > HtH
> >
> > Imar
> >
>
Message #6 by "John Tyson" <jtyson@t...> on Wed, 12 Jun 2002 06:42:52 -0700
|
|
Thanks guys for the feedback.
Feel kinda dumb - I knew how to apply styles with a stylesheet to the
anchor tag, but was under the impression the same approach wouldn't work
with asp.net web controls like asp:hyperlink. It does.
John
-----Original Message-----
From: David Barnes [mailto:DavidB@w...]
Sent: Wednesday, June 12, 2002 5:14 AM
To: aspx_beginners
Subject: [aspx_beginners] Re: hyperlink web control mouseover event
Imar
You're absolutely right. I thought I was replying to John's mail... I
hadn't
even noticed yours, or that I was actually replying to it! :)
John -- sorry if this has confused you. Imar's first suggestion and my
suggestion are basically the same.
David
> -----Original Message-----
> From: Imar@S... [mailto:Imar@S...]
> Sent: 11 June 2002 21:11
> To: aspx_beginners
> Subject: [aspx_beginners] Re: hyperlink web control mouseover event
>
>
> Hi David,
>
> I looked and looked but can't seem to find a difference
> between my first
> suggestion and your "much easier" suggestion......... ;-)
>
>
> Imar
>
>
>
> > Hi John
>
> There is a much easier way to do this. Try this bit of HTML:
>
> <html>
> <style>
> <!--
> a:hover {color: red}
> -->
> </style>
> <body>
> <a href=3D"http://www.wrox.com">Changes to Red</a>
> </body>
> </html>
>
> In this document, every link will turn red when the mouse
> hovers over it.
> If
> you only want it to work on a few links, try this:
>
> <html>
> <style>
> <!--
> a:hover.special {color: red}
> -->
> </style>
> <body>
> <a href=3D"http://www.wrox.com" class=3D"special">Changes to Red</a>
> <a href=3D"http://www.webmonkey.com">Stays Blue</a>
> </body>
> </html>
>
> This is using stylesheets. For more general information on
> stylesheets,
> have
> a look at Webmonkey:
>
> http://hotwired.lycos.com/webmonkey/authoring/stylesheets/index.html
>
> I hope this helps.
>
> David
>
> Editor, Wrox Press
>
> > -----Original Message-----
> > From: Imar Spaanjaars [mailto:Imar@S...]
> > Sent: 10 June 2002 19:14
> > To: aspx_beginners
> > Subject: [aspx_beginners] Re: hyperlink web control mouseover event
> >
> >
> > Hi John
> >
> > There are a few ways to do this, but most of them require
> > "modern" browsers
> > to do it.
> >
> > The first solution that comes to mind is to use Cascading
> > Style Sheets.
> > Define an element A:Hover in a stylesheet or inline and all
> > your links will
> > change automatically when you "mouse over" them.
> >
> > A:Hover
> > {
> > color : red;
> > }
> >
> >
> > Another option is to use JavaScript. Here is an example of
> > using in-line
> > JavaScript:
> >
> > <a href=3D"test.html" onmouseover=3D"this.style.color=3D'red';"
> > onmouseout=3D"this.style.color=3D'black';">Test Me</a>
> >
> > You could also let onmouseover and onmouseout call a separate
> > function, if
> > you'd need to change more than just the color. Theoretically,
> > you can add
> > lots of JavaScript code in-line to the onmouseover and other
> > events, but
> > IMO, this will become rather messy.
> >
> > So, here is an alternative:
> >
> > <script language=3D"JavaScript" type=3D"text/javascript">
> > function changeColor(objectToColor, sColorName)
> > {
> > objectToColor.style.color =3D sColorName;
> > }
> > </script>
> >
> > <a href=3D"test.html" onmouseover=3D"changeColor(this, 'red');"
> > onmouseout=3D"changeColor(this, 'black');">Test Me</a>
> >
> > Passing "this" effectively passes a reference to the current
> > object, which
> > is the a href in this case. However, this function can be
> > used for lots of
> > elements that support the style.color property.
> >
> > HtH
> >
> > Imar
> >
>
|
|
|
View Cart
