Solved

MouseOver Image in Master Pages

Posted on 2007-11-16
5
692 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
[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
  • 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 500 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Return array 3 35
C# DateTime Help 6 46
Difference between Leaflet and MapBox? 5 46
I'm looking for a dynamic length jQuery/javascript currency editor mask? 2 64
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Suggested Courses

738 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