ASP.NET RollOver Images

By Inge Schepers, Fons Sonnemans (Februari 2002)

Introduction

A RollOver image is an image that changes its picture when the mouse moves over it.

Example:

Move your mouse over the image!

There are many ways to implement this. One easy way of doing this is creating a helper class called 'RollOverImageManager'. This helper class does two things: add the 'onMouseOver' and 'onMouseOut' attributes to the image; add a javascript which preloads the 'MouseOver' images.

using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;

namespace RollOverImageDemo
{
    /// <summary>
    /// Utility class for an ASP.NET page that preloads images that
    /// are used for mouseovers.
    ///
    /// Be sure to notice that this code is provided as a technology sample,
    /// 'as is' and no warranties are made by the authors.
    ///
    /// For questions and comments: i.j.m.c.schepers@wxs.nl,
    ///                             Fons.Sonnemans@reflectionit.nl
    ///
    /// </summary>
    public class RollOverImageManager
    {
        private ArrayList mImages;

        public RollOverImageManager()
        {
            mImages = new ArrayList();
        }

        public void AddImage(string imageURL)
        {
            mImages.Add(imageURL);
        }

        public void InitializeImage(Image control, string imageURLMouseOver)
        {
            InitializeImage(control, imageURLMouseOver, control.ImageUrl);
        }

        public void InitializeImage(Image control,
                                    string imageURLMouseOver,
                                    string imageURLMouseOut)
        {
            AddImage(imageURLMouseOver);

            AddAttribute(control.Attributes, "onMouseOut", imageURLMouseOut);
            AddAttribute(control.Attributes, "onMouseOver", imageURLMouseOver);

        }

        public void InitializeImage(HtmlImage control, string imageURLMouseOver)
        {
            InitializeImage(control, imageURLMouseOver, control.Src);
            }

        public void InitializeImage(HtmlImage control,
                                    string imageURLMouseOver,
                                    string imageURLMouseOut)
        {
            AddImage(imageURLMouseOver);

            AddAttribute(control.Attributes, "onMouseOut", imageURLMouseOut);
            AddAttribute(control.Attributes, "onMouseOver", imageURLMouseOver);

        }

        public void AddAttribute(AttributeCollection a,
                                 string eventName,
                                 string imageUrl)
        {
            try
            {
                a.Remove(eventName);
            }
            finally
            {
                a.Add(eventName, "this.src='" + imageUrl + "'");
            }
        }

        /// <summary>
        /// Preload the images
        /// </summary>
        public void LoadImages(Page webPage)
        {
            // Create JavaScript
            StringBuilder buildString = new StringBuilder();
            buildString.Append("\n<SCRIPT LANGUAGE='JavaScript'>\n");
            buildString.Append("\n");
            buildString.Append("</script>\n");

            // Register Client Script
            if (webPage == null)
            {
                throw new ArgumentException(
                    "The Page object is invalid.");
            }
            if (webPage.Request.Browser.JavaScript == true)
            {
                webPage.RegisterClientScriptBlock("ImageLoader",
                    buildString.ToString());
            }
        }

    }
}

The InitalizeImage() methods adds the 'onMouseOver' and 'onMouseOut' attributes to the control. The images 'onMouseOver' imageUrl is added to an ArrayList. This ArrayList is used by the LoadImages() method to generate a JavaScript which loads these images. This is done to prevent the extra load of the image the moment you move the mouse over it.

Usage

You use the RollOverImageManager in the Page_Load event of your web page. You create an instance of the class. Initialize the Image controls with the images and call the LoadImage() method.

private void Page_Load(object sender, System.EventArgs e)
{
    // Create the Manager
    RollOverImageManager m = new RollOverImageManager();

    // Intialize the Image Controls
    m.InitializeImage(ImageButton1, "print2.gif");
    m.InitializeImage(Image1, "print2.gif");

    // Load the Images (generate the JavaScript)
    m.LoadImages(this);
}

WebForm1.aspx.cs

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="RollOverImageDemo.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
        <meta name="CODE_LANGUAGE" Content="C#">
    </HEAD>
    <body>
        <form id="WebForm1" method="post" runat="server">
            <asp:ImageButton id="ImageButton1" runat="server" ImageUrl="help.gif">
            </asp:ImageButton>
            <asp:Image id="Image1" runat="server" ImageUrl="help.gif">
            </asp:Image>
        </form>
    </body>
</HTML>

WebForm1.aspx

Conclusion

The RollOverImageManager is a simple helper class which lets you implement RollOver images easily. We have also experimented with an other solution. In the solution we subclassed the Image control and added an extra ImageUrlMouseOver property. This property was used to generate the OnMouseOver event. We did not use subclassing because it would lead to a lot of duplicate code unless delegation was used. Using a combination of subclassing and delegation would also take away from the simplicity of the solution, which is why we decided not to use it.

Hot Articles

ASP.NET RollOver Images

Introduction

Usage

Conclusion