Nice And Simple Image Rollover Implementation

Include this script on your page
then make image rollovers simple like:

<img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">

function SimpleSwap(el,which){
  el.src=el.getAttribute(which || "origsrc");

function SimpleSwapSetup(){
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;
    // preload image
    // comment the next two lines to disable image pre-loading
    x[i].oversrc_img = new Image();
    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");
    // save original src

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}


RolloverImageButton WebControl (emulates HTML IMG onMouseOver/onMouseOut)

Unlike HTML tags which support onMouseOver and onMouseOut, ASP.NET ImageButton’s do not.

I created a WebControl that overrides some of the default behaviors of the regular ImageButton mimicking the inline JavaScript functionality for onMouseOver and onMouseOut.

WebControl Code:  [RolloverImageButton.cs]

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Utilities.Common.WebControls.Buttons
/// <summary>
/// RolloverImageButton emulates the <img> equivelent of onMouseOver and onMouseOut
/// allowing image swapping.
/// </summary>
/// <usage>
/// Static Image:
///      ImageUrl="/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrix.gif"
/// Rollover Image:
///      ImageOverURL="/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrixRO.gif"
/// </usage>

[ToolboxData("<{0}:RolloverImageButton runat=server></{0}:RolloverImageButton>")]
public class RolloverImageButton : ImageButton

#region public virtual string ImageOverUrl
public virtual string ImageOverUrl
if (null == ViewState["ImageOverUrl"])
return string.Empty;
return Convert.ToString(ViewState["ImageOverUrl"]);

set { ViewState["ImageOverUrl"] = value; }


// Overridden Methods
#region protected override void AddAttributesToRender(HtmlTextWriter writer)
protected override void AddAttributesToRender(HtmlTextWriter writer)
writer.AddAttribute("onMouseOver", "this.src='" + base.ResolveClientUrl(ImageOverUrl) + "'");
writer.AddAttribute("onMouseOut", "this.src='" + base.ResolveClientUrl(ImageUrl) + "'");




<%@ Register TagPrefix=”XXXbuttons” Namespace=”Utilities.Common.WebControls.Buttons” Assembly=”Utilities.Common” %>


<XXXbuttons:RolloverImageButton ID=”BtnAccept” runat=”server” AlternateText=”Pay bill now at BillMatrix” ImageUrl=”/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrix.gif” ImageOverURL=”/global/utilities/lib/images/content/account/bills/pay/btn_PayNowAtBillMatrixRO.gif” OnClick=”BtnAccept_Click” /> 


Pay Now At Bill Matrix Rollover

Pay Now At Bill Matrix