Solved

Changing the Background image of an ImageButton

Posted on 2009-05-14
5
366 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
[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
  • 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 500 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

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
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…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

622 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