Thursday, 23 August 2007

Simple Hover Image/Button

Back in the old days, when I have completely no idea about HTML, I found that the HoverButton created by Microsoft FrontPage was very exciting. Now hover button is nothing fancy. It's simply using onmouseover and onmouseout events.




<input type="image" name="HoverButton1" id="HoverButton1" onmouseover="this.src='/grey_btn.gif';" onmouseout="this.src='/green_btn.gif';" src="/green_btn.gif" />


Personally I prefer wrap these up in a web control (extending ImageButton).
Download ExtendedWebControls.dll & HoverButton.cs

So in development I can add it to my toolbox and use it as a normal web control.

<%@ Register Assembly="ExtendedWebControls" Namespace="ExtendedWebControls" TagPrefix="cc1" %>

...

<cc1:HoverButton ID="HoverButton1" runat="server" BaseImgURL="green_btn.gif" HoverImgURL="grey_btn.gif" />

No comments:

Post a Comment