Solved

Using onMouseOver with Hyperlinks in ASP.net

Posted on 2003-11-04
22
17,026 Views
Last Modified: 2011-08-18
I can use onMouseOver with a hyperlink to change the text color, or add a border, but when I'm using an image in the hyperlink, I can't figure out how to alter the image.
With just straight images, or even imagebuttons, it's rather simple:
imgWhatever.Attributes.Add("onMouseOver","this.src='/images/whatever2.gif'");
and it works fine.
How can I do the same thing with Hyperlinks?
0
Comment
Question by:TGrimace
  • 9
  • 8
  • 4
  • +1
22 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9680072
<img name="img1" src="/images/whatever1.gif" onmouseover="document.images['img1'].src = '/images/whatever2.gif';" onmouseout="document.images['img1'].src = '/images/whatever1.gif';">
0
 
LVL 1

Author Comment

by:TGrimace
ID: 9680129
I meant for a hyperlink object.
<asp:HyperLink id=hlkTesting runat="server" NavigateUrl="/test/testing.aspx" ImageUrl="/images/image.gif"></asp:HyperLink>
 
 I'm using asp.net with C# for the code-behind language.  Visual Studio.net is the editor I use.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9680416
Hi,

  I am not an asper, but...

if, as you say, this works:
 imgWhatever.Attributes.Add("onMouseOver","this.src='/images/whatever2.gif'");

this might:

hlkTesting.Attributes.Add("onClick", "this.ImageURL='/images/image.gif'")

Vinny
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 1

Author Comment

by:TGrimace
ID: 9680465
Unfortunately, that doesn't seem to work either.
Thanks tho, Vinny
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9680604
If asp has the same DOM access as javascript:

 "this.childNode.ImageURL='/images/image.gif'")

Vinny

0
 
LVL 1

Author Comment

by:TGrimace
ID: 9680636
I tried it, but this.childNode gave me an error ('this.childNode' is null or not an object)
For some reason I'm only having problems with the hyperlink object.  With images/imagebuttons imgWhatever.Attributes.Add("onMouseOver","this.src='/images/whatever2.gif'"); works just fine.  This is very frustrating.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9681184
According to this:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfsystemwebuiwebcontrolshyperlinkclassimageurltopic.asp

there is a set ImageURL and get ImageURL

so, maybe...

....Attributes.Add('onclick', "this.get ImageURL='somepic.gif'")

Vinny
0
 
LVL 12

Expert Comment

by:ahosang
ID: 9681340

hlkTesting.Attributes.Add("onMouseOver","this.firstChild.src='/images/whatever2.gif'")
0
 
LVL 1

Author Comment

by:TGrimace
ID: 9681585
*sigh*  Neither of those worked, unfortunately.  This is very frustrating.  I'm almost ready to give up on this and search for a different solution to my webpage problems.  Maybe there is no way to change the image within a hyperlink object on a mouseover.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9681593
darn it ahosang :(

i keep doing that -- substituting childNode for firstChild
even without being an asper -- your's has a ring to it :)

Vinny
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9681608
have you checked any of the dedicated asp forums? (search google)
0
 
LVL 12

Expert Comment

by:ahosang
ID: 9681789
learning simple HTML could be advantageous. The idea that struts framework and any other totally avoids the need for html is ridiculous.
0
 
LVL 1

Author Comment

by:TGrimace
ID: 9681856
I do know html, but it won't help me at all in this situation.  Unless I want to redesign the whole sidebar using simple images for navigation, thus giving up the dozen other thing I have the image objects doing, depending on what page they're currently on.  And I don't want to do that.  There are many many things that asp (and asp.net more so) can do that html cannot.
0
 
LVL 12

Expert Comment

by:ahosang
ID: 9682202
I meant the combined knowledge of HTML and ASP.NET
Specifically, what does the add bit do? If it adds an onmouseover attribute to the HTML output of the <a> tag, then code simialr to mine should work. What is the resultant HTML(HTML only please) of the page? Then we can see why it doesn't work
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9682356
ahosang,

  from what I gather, the ...Attributes.Add is similiar to addAttribute('eventName', anonymousFunctionPtr)

TGrimace:
  did that link to msdn help any?

Vinny

0
 
LVL 1

Author Comment

by:TGrimace
ID: 9682373
                                   <a id="hlkTesting" onMouseOver="this.firstChild.ImageURL='/NewSiteImages/SidebarNames/Whee.gif'" href="/News/Testing.aspx"><img src="/NewSiteImages/SidebarNames/Home.gif" border="0" /></a>

is the html of the pagesource.  It gives no error when running, but the mouseover does nothing.

The actual html is <asp:Hyperlink id="hlkTesting" runat="server" ImageUrl="/NewSiteImages/SidebarName/Home.gif" NavigateUrl="Testing.aspx"></asp:Hyperlink>

and the code-behind is: hlkTesting.Attributes.Add("onMouseOver","this.firstChild.ImageUrl='/NewSiteImages/SidebarNames/Whee.gif'");
0
 
LVL 1

Author Comment

by:TGrimace
ID: 9682384
Vinny, I did some searching, but couldn't come up with a way to change the image itself.  It told me how to change text color, background color, fonts, font sizes and things like that.  I already knew how to do those though :)
Thanks tho!
0
 
LVL 12

Accepted Solution

by:
ahosang earned 230 total points
ID: 9682484
Did you try my code??
It was specifically:
hlkTesting.Attributes.Add("onMouseOver","this.firstChild.src='/NewSiteImages/SidebarNames/Whee.gif'")
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9682576
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9682589
may not be the way you want, but...

<asp:checkbox id="Checkbox4" runat="server" Text="The Image and Link URL will change" />
<asp:Image id=Image1 runat="server" ImageUrl="~/Images/YahooLogo.gif" />
   <asp:HyperLink id=HyperLink1 runat="server" NavigateUrl="http://www.yahoo.com" >
Go to Search Engine</asp:HyperLink>
<vam:fieldstatecontroller id="Fieldstatecontroller4" runat="server"
   ControlIDToChange="Image1" ConditionTrue-URL="~/Images/GoogleLogo.gif">
   <ConditionContainer>
      <vam:CheckStateCondition ControlIDToEvaluate="Checkbox4"
           Name="CheckStateCondition"></vam:CheckStateCondition>
   </ConditionContainer>
</vam:fieldstatecontroller>
<vam:FieldStateController id=FieldStateController5 runat="server"
   ControlIDToChange="HyperLink1" ConditionTrue-URL="http://www.Google.com">
   <ConditionContainer>
       <vam:CheckStateCondition ControlIDToEvaluate="Checkbox4"
          Name="CheckStateCondition"></vam:CheckStateCondition>
   </ConditionContainer>
</vam:FieldStateController>

used 'imageURL hyperlink change attribute'  at google
there were others

Vinny
0
 
LVL 1

Author Comment

by:TGrimace
ID: 9682767

hlkTesting.Attributes.Add("onMouseOver","this.firstChild.src='/NewSiteImages/SidebarNames/Whee.gif'")

worked!  I'm not sure why it didn't before.  I must have mixed and matched that one and
Attributes.Add('onclick', "this.get ImageURL='somepic.gif'")

I probably tried this.firstChild.src='.....

Thanks both of you!  I tried to give you both points, but I'm not sure I did it right :(

Thanks again!
0
 
LVL 1

Author Comment

by:TGrimace
ID: 9682769
oops I meant I probably tried this.firstChild.ImageURL
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question