• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

Changing the Background image of an ImageButton

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
directxBOB
Asked:
directxBOB
  • 3
  • 2
1 Solution
 
OMC2000Commented:
.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
 
directxBOBAuthor Commented:
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
 
OMC2000Commented:
It's a good idea, but if you need all browsers, check whether it works for all of them or not.
0
 
directxBOBAuthor Commented:
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
 
OMC2000Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now