Free Jobs

Dot Net Forums: ASPNET (77) C#.NET (39) VB.NET (8) AJAX (21) Silver Light (1) WCF (10) WPF (1) WWF (1) .NET 3.5 (3) SQL SERVER (38) Other (3)

Topic: How to write or superImpose or Overlay Different Text on Images in ASP NET

To get the Posted Questions details daily in your mail Click Here

Share this Post on Facebook/Twitter/Orkut Bookmark and Share

User: dhiraj5079 Post Date: 01 Nov 2010 06:33

Many a times you may need an Image to be displayed on pages and
depending upon some user action say (a drop down selection) the text inside
the Image should change.This can Be done using z-Index.

Main Content:
For changing the text inside the image you will need to use the z-index
property of CSS. The Z index of all the normal controls on your web page
is zero by defalut.So take a div of z index one with absolute position so
in this way you can put this div superimposed anywhere on your web page.
Any thing with z index 2,3...etc will have higher superimposition.

Suppose MyImage.png is the image on which there is a text "abc" which you
want to make "xyz" on a perticular dropdown selection on the page.
So first you need to delete "abc" by creating a simple image completely
white from paint called whitePaint.png of the same dimention as of your
text "abc" and use with with z index 2 as shown below.
Then superimpose your text "xyz" with z index 3 by using your label
The text of LSImpose can be changed easily on a drop down selection from
code behind.

<div style="position: absolute; z-index: 1;"> <asp:Image ID="ImageMobile" Width="200" Height="300" ImageUrl="~/images/MyImage.png" runat="server" /> <div style="position: absolute; top:46%; left:21%; font-size:20pt; font-weight: bold; color:White; z-index: 2;"> <img src="images/whitePaint.png" alt="Image" /> </div> <div style="position: absolute; top:46%; left:21%; font-size:20pt; font-weight: bold; color:Maroon; z-index: 3;"> <asp:Label ID="LSImpose" runat="server" Text="XYZ"></asp:Label> </div> </div>

Thus in this way you will have the effect like for each drop down selection
you are providing a new image.You should change top:46%; left:21% as per the
positions on your page.

About Writer:
Hi,I am IT Professional From Mumbai

Writer's Link: http://

Writer's Email:

Post Comment

Similar Articles Top ArticlesLatest Articles Other Articles by this Author Copyright © 2009-2011 | All Rights Reserved
All content of this website is protected by copyright laws and should not be reproduced in any form or by any means without written permission
(Best viewed in IE 8.0+ or Firefox 3.0+ at resolution of 1024 * 768 or higher)