Solved

Using onMouseOver with Hyperlinks in ASP.net

Posted on 2003-11-04
22
16,983 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

932 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now