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

x
?
Solved

Changing the Background image of an ImageButton

Posted on 2009-05-14
5
Medium Priority
?
370 Views
Last Modified: 2012-05-06
I have an image button, and I would like to change the background image of it on a Rollover

All I could find was the following:

.aspx file
<asp:imagebutton id="ibOne" runat="server" imageurl="~/images/1.gif" borderwidth="0"></asp:imagebutton>

.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
ibOne.Attributes.Add("onmouseover", "this.src='images/3o.gif'");
ibOne.Attributes.Add("onmouseout", "this.src='images/4.gif'");
}

How would I convert this so I can change the Background image and not the actual image itself?

0
Comment
Question by:directxBOB
  • 3
  • 2
5 Comments
 
LVL 15

Expert Comment

by:OMC2000
ID: 24382682
.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
ibOne.Attributes.Add("onmouseover", ""this.style.backgroundImage='url(images/3o.gif)'");
ibOne.Attributes.Add("onmouseout", ""this.style.backgroundImage='url(images/4.gif)'");
}
0
 

Author Comment

by:directxBOB
ID: 24384636
What would be the easiest way of achieving this form of CSS Background Image Switching? It Loads the full image, but simply moves it depending on the acton.

Now 100% sure how I adapt the above code to handle this.

#menu a {
   background: url("button.gif") 0 0 no-repeat;
   ...
   }
#menu a:hover {
   background-position: -157px 0;
   ...
   }
#menu a:active {
   background-position: -314px 0;
   ...
   }
0
 
LVL 15

Expert Comment

by:OMC2000
ID: 24386118
It's a good idea, but if you need all browsers, check whether it works for all of them or not.
0
 

Author Comment

by:directxBOB
ID: 24393321
I only need Internet explorer, and provided Caching is enabled it will function, this is specifically for an internal web support system. So how do I achieve the above with an image button, I tried adding it as an attribute but can't seem to get it working.
0
 
LVL 15

Accepted Solution

by:
OMC2000 earned 2000 total points
ID: 24397896
don't know why, but it does not want to work using styles. However, you can achive the same result specifing X Position of background like the following

<style type="text/css">
    .nor  
{
background: url(button.jpg) 0 0 no-repeat;
background-position-x: 22;
}
    .ove  
{
background: url(button.jpg)  0 0 no-repeat;
background-position-x: -22;
}
</STYLE>


<asp:imagebutton id="ibOne" runat="server" CssClass="nor" .... ></asp:imagebutton>


<script  runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ibOne.Attributes.Add("onmouseover", "this.style.backgroundPositionX=-22");
ibOne.Attributes.Add("onmouseout", "this.style.backgroundPositionX=22");
}
</script>


Also, I would move image along Y coordinate too



0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
Screencast - Getting to Know the Pipeline
Suggested Courses

926 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