?
Solved

Using onMouseOver with Hyperlinks in ASP.net

Posted on 2003-11-04
22
Medium Priority
?
17,111 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
Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

 
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 920 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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

765 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