Solved

Using onMouseOver with Hyperlinks in ASP.net

Posted on 2003-11-04
22
17,042 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Where can I find... 1 53
URGENT - Wordpress site missing  theme 9 68
Button to go back 3 39
Word Press Fixes to Google Speed Test Issues 2 24
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

749 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