German Wear Discount Shop - Click Here Write for Dotnet-friends and earn for your each submission [Dot]Net-Friends
Skip Navigation Links
Home
Latest
Fast Code
Articles
Tutorials
Online Resources
Forums
Login   | Hi, Guest


Create a Rollover ImageButton Web User Custom Control and add it to your ASP .NET Or SharePoint Site
Written By Omer Kamal On 08/10/2007

In this easy Tutorial we are going to explain that how can we creae a Web User Control which will have a Rollover/Mouseover effect for an ImageButton

Views: 2368
Rating: 5
Login to Rate
omerkamal
Tagged Under: Microsoft SharePoint Server 2007, User/Custom Controls, Web Controls
´

Explanation:

 
1.       Create a New Project. Select “Web Control Library” Type from the Project Templates.
2.       Name your Control any suitable name. We are calling our Project “KamalRolloverImageButton”.
3.       Change default Property Attribute of the Class from Text to ImageUrl
4.       Change the ToolboxData Attribute according to your will. Our both Attributes look like following:
 
[DefaultProperty("ImageUrl")]
[ToolboxData("<{0}:RolloverImageButton runat=server> ")]
 
5.       You will notice that the default Class WebCustomControl1” is inherited from WebControl
6.       Rename the Class file name to “RolloverImageButton.cs” this will also Change Class name to “RolloverImageButton”. Change Base class of said Class to “ImageButton”.
7.       Remove “Text” Property and “RenderContents”Eventfrom the Class.
8.       Add new Custom Property to the Class call it “ImageOverUrl”
 [Bindable(true)]
        [Category("Appearance")]       
        [DefaultValue("")]
        [Localizable(true)]  
        public virtual string ImageOverUrl
        {
            get
            {
                if (null == ViewState["ImageOverUrl"])
                    return string.Empty;
                else
                    return Convert.ToString(ViewState["ImageOverUrl"]);
            }
 
            set { ViewState["ImageOverUrl"] = value; }
 
        }
 
9.       Override the AddAtributesToRender Event of the ImageButton Object
10.   Add Two Attributes to the Object. We will use ResolveClientUrl Method to get the Image Source URL.
protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute("onmouseover", "this.src='" + base.ResolveClientUrl(ImageOverUrl) + "'");
            writer.AddAttribute("onmouseout", "this.src='" + base.ResolveClientUrl(ImageUrl) + "'");
 
            base.AddAttributesToRender(writer);
        }
11.   Here ImageOverUrl is Image when someone moves mouse on the ImageButton where as ImageUrl is a Normal image view of the ImageButton.
12.   Now the last step is to build the DLL. This step can be achieved by right clicking the Project in Solution Explorer Side bar and then Clicking Build.
Now, you have your new Custom ImageButton. You can use this Control in ASP .NET Web sites of in the SharePoint Sites Both.
1.       To add the “KamalRolloverImageButton” to your Project you have to add reference to the Created DLL.
2.       In ASP .NET you can Import the DLL through Controls Tool bar
3.       Right Click the Controls Tool bar and Click “Choose Items…”
4.       Select Browse and locate your DLL for the RolloverImageButton
5.       Click Open to add it to the “.NET Framework Components”
6.       Now you can see the Object in given List.
7.       Click Ok to add the Selected Object to your Toolbar Panel.
8.       Now, you can just Drag and drop your rolloverImageButton anywhere on the ASP .NET Page.
Delicious Digg reddit reddit Technorati
About the Author:

@@ Omer Kamal is a Software Developer at Elanize KG Germany. He MSc. Mathematics from Islamia University Bahawalpur, Pakistan and Certified Developer from National Institute of Electronics Islamabad, Pakistan. He is Founder of FriendsPoint.de and Dotnet-Friends.com. He is currently Involved with Microsoft Office SharePoint 2007, Microsoft Dynamics CRM, BI Portal Solutions (Microsoft Dynamics Customization) and Web Security Solutions.
Check Omer Kamal Profile

Related Useful Links:
Visitors/Readers Comments
(for questions please use The Forum)



azeem

i want to make roll over button in desktop application plz suggest about it

25/08/2008 21:56:52 UTC




Add your Comments

Name:  
Message:
Note: For faster response please use Forums >> for your questions instead of the comments area! (Admin)