This is a sample Website ...

The following page will demonstrate how to use my .NET Library to get IR working on you ASP.NET page.
It's really easy to implement and still very powerful.
The basic concept was adapted from this project.

So here we go. Please follow these steps:

Copy the MB.UI.ImageIR.dll into your webapplication's bin-Folder.

In your web.config add the following line

        <add verb="*" path="ImageHandler.axd" type="MB.UI.ImageIR.ImageHandler,MB.UI.ImageIR"/>

to the node system.web/httpHandlers.

On every page you need to specify which html-elements should be replaced by a dynamic rendered image. Usually you would do this in your master-page or in a user-control, so you have one location to maintain the specification.

You will identify the html/dom-elements by specifying css-accessors. For instance css-classes, css-attributes or html-tags. Please refer to a css-documentation for further information.

First we need to register the control on your website. Add the following line to the head of your document (right below <%@ Page ...):

            <%@ Register TagPrefix="mb" Assembly="MB.UI.ImageIR" Namespace="MB.UI.ImageIR"  %>

Then we can specify the elements anywehre inside your form. Here are two examples:

            <mb:IRControl ID="IRControl1" runat="server">
                <Replacements>
                    <mb:Replacement ID="Replacement1" runat="server" 
                        CssElement="h1" Alignment="Near" 
                        BackgroundColor="White" Color="#FF33CC" 
                        FontName="TradeGothic Bold" 
                        MaximumWidth="500" FontSize="18" 
                        ToUpper="True" Transparent="False" />
                </Replacements>
                <Replacements>
                    <mb:Replacement ID="Replacement2" runat="server" 
                        CssElement="div.important" Alignment="Center" 
                        BackgroundColor="Black" Color="White" 
                        FontName="TradeGothic Bold" 
                        MaximumWidth="200" FontSize="12" 
                        Transparent="True" />
                </Replacements>
            </mb:IRControl>

I guess the usage is self explaining. In the above example we specify two replacements. The first one replaces every h1-tag with a image-text which has a white background, a pink text-color, rendered with the font TradeGothic Bold, with a maximum width if 500 pixels, a font size of 18pt, which is Uppercased, and which background is not transparent.
The second one replaces all div elements which have the class important assigned.

You can prepare your webpage for using IR. This means calling a JS-function and defining some css. This way every element which should be replaced is invisble during loading of the images. This behaviour is much more convenient for the web user because text-phrases do not become replaced suddenly by images.

To prepare your document add this javascript right below the body tag:

            <script type="text/javascript">prepareDotIR();</script>

For every css-element add a decoy element which hides the element. According to the above example:

            .dotIR-decoy h1,
            .dotIR-decoy div.important {visibility: hidden;}