Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

MouseOver Image in Master Pages

Posted on 2007-11-16
5
Medium Priority
?
696 Views
Last Modified: 2012-05-05
Hi Experts !
I need some help please with using MouseOver on some images in my MasterPage
I have a button that I want to replace with different image when I do OnMouseOver and OnMouseOut.
Simple , right ?
So I did:
<asp:ImageButton ID="btnWeddings" runat="server" ImageUrl="~/Images/weddingBtn.gif" onmouseover="this.src='Images/weddingPressedBtn.gif';" onmouseout="this.src='Images/weddingBtn.gif';" OnClick="ImageButton4_Click"/>
It works as long as I stay on the same page.

Here is a problem... As soon as the MasterPage pulls content from another page OnMouseOver and OnMouseOut images break.
I tried using:
onmouseover="this.src='~/Images/weddingPressedBtn.gif';"
and
onmouseover="this.src='../Images/weddingPressedBtn.gif';"
But ~/ doesn't seem to work with events like OnMouseOver for some reason.
I also tried adding to the page load event:
        btnWeddings.Attributes.Add("OnMouseOver","this.src='~/Images/weddingPressedBtn.gif'");
It only works with direct path such as Images/.... breaking the whole thing if I pull content from another page.
Thank you in advance !
0
Comment
Question by:techsuppoprt
  • 2
  • 2
5 Comments
 
LVL 12

Expert Comment

by:craskin
ID: 20300630
onmouseover="this.src='~/Images/weddingPressedBtn.gif';"

since this is essentially javascript, i don't think the ~ is going to act like it does in a purely .net postback event. if you place the entire url there, does it work? like this.src='http://mysite.com/images/...gif
0
 
LVL 6

Accepted Solution

by:
ventaur earned 2000 total points
ID: 20300701
You almost had it with your code approach, but since onMouseOver is a client-side event, the "~" won't get translated correctly without some help. See below.
btnWeddings.Attributes.Add("onMouseOver", string.Format("this.src='{0}'", ResolveClientUrl("~/Images/weddingPressedBtn.gif")));

Open in new window

0
 
LVL 1

Author Comment

by:techsuppoprt
ID: 20301119
Thanks your answers guys! Craskin, sorry using full URLs is not an option although I'm sure it would work.

Ventaur, it worked like a charm. Do you know of any good guide on the Internet where I can read about this ? Being new I want to understand what I'm doing... Not just copy/paste the code :)  I added points.
0
 
LVL 6

Expert Comment

by:ventaur
ID: 20301282
Here are a couple of articles on paths in ASP.NET:
http://msdn2.microsoft.com/en-us/library/ms178116.aspx
http://www.aspnetpro.com/newsletterarticle/2003/11/asp200311kd_l/asp200311kd_l.asp

How to use client-side events in server-side controls:
http://support.microsoft.com/kb/318814/es

Injecting client-side code in ASP.NET (this one is more advanced for emitting JS code that you do not want to duplicate on the page, etc.):
http://msdn2.microsoft.com/en-us/library/aa478975.aspx

Resolving URLs:
http://www.pluralsight.com/blogs/fritz/archive/2006/02/06/18596.aspx
http://clipmarks.com/clipmark/6C2F8613-F6CA-4504-8BE1-FB23AC4D6C17/


Enjoy coding!
0
 
LVL 1

Author Closing Comment

by:techsuppoprt
ID: 31409625
Thank you!
As always ExpertSexChange saves the day :)
0

Featured Post

[Webinar] Cloud Security

In this webinar you will learn:

-Why existing firewall and DMZ architectures are not suited for securing cloud applications
-How to make your enterprise “Cloud Ready”, and fix your aging DMZ architecture
-How to transform your enterprise and become a Cloud Enabler

Question has a verified solution.

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

Introduction Hi all and welcome to my first article on Experts Exchange. A while ago, someone asked me if i could do some tutorials on object oriented programming. I decided to do them on C#. Now you may ask me, why's that? Well, one of the re…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Integration Management Part 2
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses

971 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