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">
//
// http://jehiah.com/archive/simple-swap
// 


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();
    x[i].oversrc_img.src=oversrc;
    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");
    // save original src
    x[i].setAttribute("origsrc",x[i].src);
  }
}

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

Source: http://jehiah.cz/a/simple-swap

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>

[DefaultProperty("ImageUrl")]
[ToolboxData("<{0}:RolloverImageButton runat=server></{0}:RolloverImageButton>")]
public class RolloverImageButton : ImageButton
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]

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

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

}
#endregion

// 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) + "'");

base.AddAttributesToRender(writer);
}
#endregion

}
}

Directive:


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

Implementation:


<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” /> 

Result:

Pay Now At Bill Matrix Rollover

Pay Now At Bill Matrix