sabato 4 agosto 2007

FadingImage: a web custom control fading between images

(note: this is my first post in English: I'm learning English, sorry for my mistakes and I will appreciate your kind corrections)

For an ASP.NET project I needed to fade between images, so I decided to write a web custom control: FadingImage.
Usage is easy: changing ImageUrl property the control fades between the previous image and the new one.
It derives from System.Web.UI.WebControls.Image and implements IPostBackEventHandler, I added one property and two events.

% increment of opacity every 50 milliseconds (for example setting this property to 5 makes images shading in one second). If you don't want fading set this property to 0.

onEndFading(object sender)
occurs each time a fading ends.

onClick(object sender, int t, int x, int y)
occurs for every mouse click over the control, t represent the mousekey (1 = left, 2 = right), x and y the coordinates relative to the control.

I tested the control with IE7, Firefox 2 and 1.5, Opera 9.21, other visitors advise me that it works with IE6, but I want to compile a complete compatibility list:

Could you help me? Have a look at the image below:

What do you see (Uluru, Sydney skyline or both)? Which is your browser/version? Let me know! Thanks.

You can download the control by clicking here or test it here.
The zip contains the DLL (put it in the bin directory and add the control to the toolbox of Visaul Studio), the source (FadingImage.cs) and the javascript source (not needed by the program because the js code is integrated in the C# code, but I included it for an easier reading).

Note: don't forget to insert the DOCTYPE tag:

How to use the DLL in your WEB projects:

1 - put the DLL fille in the Bin directory of the site;

2 - if you want to add the control to Visual Studio toolbox, right-click on it, click on "Choose Items ..." and browse the project to add the DLL.

Note: if you want to modify the source remeber to add the right references (System.Web, System.Web.Extension, System.Drawing)

Good luck and let me know!

Nessun commento: