Solved

Changing the Background image of an ImageButton

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

679 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