Rank: Member
Joined: 6/10/2004(UTC)
Posts: 101
|
How to you add a rollover/mouseover effect for the buttons?
|
|
|
|
|
|
Rank: Member
Joined: 11/25/2003(UTC)
Posts: 370
|
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/Lots of tutorials via Google search. This one is pretty good. |
|
|
|
|
|
|
Rank: Member
Joined: 6/10/2004(UTC)
Posts: 101
|
Yes, I do like this. I can do this but the buttons I'm dealing with are not straight css/html and therefor don't look like this. Here is what I have to deal with: <anthem:ImageButton id="btnAdd" runat="server" AlternateText="Add to Cart" ImageUrl="~/BVModules/Themes/Bvc5/Images/Buttons/AddToCart.png" EnabledDuringCallBack="False" EnableCallBack="false"></anthem:ImageButton> <asp:ImageButton ID="btnSaveChanges" runat="server" AlternateText="Add to Cart" ImageUrl="~/BVModules/Themes/Bvc5/images/Buttons/SaveChanges.png" Visible="False"/> How do I create a rollover effect with this code?
|
|
|
|
|
|
Rank: Member
Joined: 11/25/2003(UTC)
Posts: 370
|
Although in you source this id is id="btnAdd" it will not be that when it is rendered. So you will have to look at your view source in your browser to see what the rendered id is. Once you have that you can change the mouseover image. Some helpful tools would be FireFox with the Firebug add on and then the jQuery library to manipulate the DOM. There are a number of approaches but the first step is knowing the rendered ID of whatever you are trying to change. With current versions of ASP.Net it will not be the same as your source when using ASP.Net controls. |
|
|
|
|
|
|
Rank: Member
Joined: 6/10/2004(UTC)
Posts: 101
|
Kim,
Okay, most of that went over my head - just to give you a heads-up on my coding abilities. Here is the id info as captured using view source:
id="Anthem_ctl00_MainContentHolder_AddToCartButton1_btnAdd__"><input type="image" name="ctl00$MainContentHolder$AddToCartButton1$btnAdd" id="ctl00_MainContentHolder_AddToCartButton1_btnAdd" src="/BVModules/Themes/Bvc5/images/buttons/AddToCart.png" alt="Add to Cart" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentHolder$AddToCartButton1$btnAdd", "", true, "", "", false, false))" style="border-width:0px;" /></span>
Seems like it's not going to be as easy as I would like.
|
|
|
|
|
|
Rank: Member
Joined: 9/19/2010(UTC)
Posts: 104
|
You should be able to assign a CSS class to any ASP.NET or most Anthem controls. I've added CssClass="xyz" to the source below as an example: <anthem:ImageButton id="btnAdd" runat="server" CssClass="class-name" AlternateText="Add to Cart" ImageUrl="~/BVModules/Themes/Bvc5/Images/Buttons/AddToCart.png" EnabledDuringCallBack="False" EnableCallBack="false"></anthem:ImageButton> I find this approach makes it easier to wire up CSS and jQuery versus relying on the ASP.NET control ids. |
Best regards, Shan Plourde www.pahsah.com+1 (416) 628-1280 -------------------------------- |
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.