Replacing Alphabets with Images

anup.maverick · December 16th, 2009, 04:17 AM

Hi Again,

I have 2 pages(Pg1, Pg2).

On Pg1, I am taking Name of the user as an input in a textbox.

On Pg2, I want this Name converted into Image.
SO for e.g If the User Name is SACHIN, then on Pg 2
"S" should be replaced by an Image,
"A" should be replaced by an Image,
"C" should be replaced by an Image & so forth.

How to achieve this?

Anup

melvik · December 21st, 2009, 11:42 AM

what comes first to my mind is having all alphabet images (let says A-Z) & just make them in order with <img> tag i dont think it'd be so difficult
i did like this but u shoul do it in specific area ;)

Code:

        foreach (char ch in txt1.Text)
        {
            Response.Write("<img src='Image/"+ch+".gif' />");
        }

chroniclemaster1 · December 21st, 2009, 02:36 PM

Thinking outside the box for a second,

there are a number of problems with executing text as images, and even once the technical challenges of this project are met, any visitor, including you, will still encounter those problems. Any user browsing with a non-text browser will recieve what they interpret as a broken site. Anyone browsing with images off, or cached images will recieve what they interpret as a broken or an insecure site. When you request a page, any hiccup on the server side, or any rendering errors on the browser side will result in some or all of the images being replaced with red Xs.

There are better techniques which don't break your experience when you're browsing the site. The "worst case scenario" in those cases is that the name is rendered in standard text; that ensures a basic level of function and you add more advanced levels of rendering to take advantage of more advanced features of your system, if available. You can output the name as text, but simply wrap the name in an HTML <span> tag. This behavior is automatically done for you by ASP.NET if you display to a <asp:Label> control. Simply set the CssClass attribute of the label. Then you have two best practices options.

1) Style with CSS - If you give the CssClass a value like, myLoginName, then you can add a style rule for .myLoginName {}. You can then use any CSS styling that you want. This will usually handle 95-99% of your styling needs.

2) In the rare event that you need more advanced styling options than are available for CSS. (e.g. a company's style manual mandates that their name always be presented in a rare font that's not available on most systems) then you have the option to deploy Sifr. This uses javascript to detect for the presence of Flash and if available, it replaces the text with a transparent Flash box that replaces the text with the word in the desired font.

Like CSS, this is not absolutely foolproof, but the worst case is that the name is rendered as text, so there's always a basic level of support.