Solved

Changing the Background image of an ImageButton

Posted on 2009-05-14
5
362 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 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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

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…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

809 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