Overlapping Images in ASP.NET

[Guest]

Can any one tell me how can I create overlapping images using ASP.NET. That
is, One rectangle drawn as a background image and then another image is
placed over it. If the upper image gets transparent, the background image
should be visible. Can any one help me in this?

 

[Kevin Spencer]

Okay, the first thing we need to do is narrow down our field. What you
really want to know is how to create overlapping images with HTML, since
HTML is what ASP.Net produces. This can be done using CSS and absolute
positioning. However, when you say "If the upper image gets transparent, the
background image should be visible," how do you expect "the upper image" to
"get transparent?" Do you figure it will fade with age?

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Neither a follower
nor a lender be.

 

[Guest]

Well, actually yes... the image of the user fades as the time passes by...the
user image is an image recieved from the web and the background is a simple
filled rectangle...I want to make the user image go fade/transparent with
time...and as this happens....the background will be more and more visible.
This is all done via ASP.NET dynamically....no HTML of CSS is involved...Here
is the code i wrote:


CODE:
====

<%@ Page language="c#" Debug="true" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.IO" %>


<script language="C#" runat="server">
Bitmap bkGroundImg = null;
Bitmap userImg = null;
Graphics bkImgGraphics = null;
Graphics userImgGraphics = null;

void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "image/jpeg";

string url = Request.QueryString["url"];
string trans = Request.QueryString["trans"];

// Response.Write("url: "+url);
// Response.Write("<userImgr>trans: "+(float)DouuserImgle.Parse(trans));

WebClient client = new WebClient();
Stream stream =
client.OpenRead(url);//"http://www.n-tv.de/images/200410/5438283_angelina-jolie8.jpg");

userImg = new Bitmap(stream);
userImg = new Bitmap(userImg, 100, 100);
stream.Close();

bkGroundImg = new Bitmap(100+10, 100+10);

bkImgGraphics = Graphics.FromImage(bkGroundImg);
userImgGraphics = Graphics.FromImage(userImg);

// SolidBrush brush = new SolidBrush(Color.DarkGoldenrod);


// bkImgGraphics.DrawString("Angelina Jolie", new Font("Arial
userImglack", 15), userImgrush,3, 3);

Rectangle rect = new Rectangle(0, 0,
(int)bkGroundImg.PhysicalDimension.Width,
(int)bkGroundImg.PhysicalDimension.Height+1);
Brush brush = new LinearGradientBrush(rect, Color.DarkGoldenrod,
Color.Yellow, 90);

// Pen p = new Pen(Color.Red, 10);
// bkImgGraphics.DrawRectangle(p, rect);

bkImgGraphics.FillRectangle(brush, rect);

// p = new Pen(Color.Green, 10);
// bkImgGraphics.DrawLine(p, 0, 35, (int)userImg.PhysicalDimension.Width,
35);

makeTransparent((float)Double.Parse(trans));

bkImgGraphics.DrawImage(userImg, 5, 5);

bkGroundImg.Save(Response.OutputStream, ImageFormat.Jpeg);
}

void makeTransparent(float transparencyLevel)
{
ColorMatrix clrMatrix = new ColorMatrix();
clrMatrix.Matrix33 = transparencyLevel;

ImageAttributes imgAtt = new ImageAttributes();
imgAtt.SetColorMatrix(clrMatrix);

// Response.Write("<userImgr>clrMatrix.Matrix33: "+clrMatrix.Matrix33);

// userImgGraphics = Graphics.FromImage(userImg);
userImgGraphics.DrawImage(userImg, new Rectangle(15, 15, userImg.Width,
userImg.Height), 0, 0, userImg.PhysicalDimension.Width,
userImg.PhysicalDimension.Height, GraphicsUnit.Pixel, imgAtt);
// userImgGraphics.Dispose();

// Response.Write("<userImgr>userImg: "+userImg);
}
</script>

 

[Kevin Spencer]

Hi Fahad,

This is all done via ASP.NET dynamically....no HTML of CSS is

involved...Here

?! That's just plain naive. I don't know how you expect to write an ASP.Net
application at all if you think there's no HTML or CSS involved. You can't
display an image (or anything else) in a page without HTML! HTML is the
bread an butter of the client-side aspect of ASP. If you don't understand
that, you're wasting your time.

And from the looks of it, I would have to say that you are indeed wasting
your time. If you want to position an image over another image in a web
page, and have the top image fade, you're going to need some help on the
client side. You could do this with an animated GIF file, SWF, or a Java
applet or ActiveX Control on the client.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Neither a follower
nor a lender be.

Well, actually yes... the image of the user fades as the time passes by...the
user image is an image recieved from the web and the background is a simple
filled rectangle...I want to make the user image go fade/transparent with
time...and as this happens....the background will be more and more visible.
This is all done via ASP.NET dynamically....no HTML of CSS is involved...Here
is the code i wrote:


CODE:
====

<%@ Page language="c#" Debug="true" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.IO" %>


<script language="C#" runat="server">
Bitmap bkGroundImg = null;
Bitmap userImg = null;
Graphics bkImgGraphics = null;
Graphics userImgGraphics = null;

void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "image/jpeg";

string url = Request.QueryString["url"];
string trans = Request.QueryString["trans"];

// Response.Write("url: "+url);
// Response.Write("<userImgr>trans: "+(float)DouuserImgle.Parse(trans));

WebClient client = new WebClient();
Stream stream =
client.OpenRead(url);//"http://www.n-tv.de/images/200410/5438283_angelina-jo
lie8.jpg");

userImg = new Bitmap(stream);
userImg = new Bitmap(userImg, 100, 100);
stream.Close();

bkGroundImg = new Bitmap(100+10, 100+10);

bkImgGraphics = Graphics.FromImage(bkGroundImg);
userImgGraphics = Graphics.FromImage(userImg);

// SolidBrush brush = new SolidBrush(Color.DarkGoldenrod);


// bkImgGraphics.DrawString("Angelina Jolie", new Font("Arial
userImglack", 15), userImgrush,3, 3);

Rectangle rect = new Rectangle(0, 0,
(int)bkGroundImg.PhysicalDimension.Width,
(int)bkGroundImg.PhysicalDimension.Height+1);
Brush brush = new LinearGradientBrush(rect, Color.DarkGoldenrod,
Color.Yellow, 90);

// Pen p = new Pen(Color.Red, 10);
// bkImgGraphics.DrawRectangle(p, rect);

bkImgGraphics.FillRectangle(brush, rect);

// p = new Pen(Color.Green, 10);
// bkImgGraphics.DrawLine(p, 0, 35, (int)userImg.PhysicalDimension.Width,
35);

makeTransparent((float)Double.Parse(trans));

bkImgGraphics.DrawImage(userImg, 5, 5);

bkGroundImg.Save(Response.OutputStream, ImageFormat.Jpeg);
}

void makeTransparent(float transparencyLevel)
{
ColorMatrix clrMatrix = new ColorMatrix();
clrMatrix.Matrix33 = transparencyLevel;

ImageAttributes imgAtt = new ImageAttributes();
imgAtt.SetColorMatrix(clrMatrix);

// Response.Write("<userImgr>clrMatrix.Matrix33: "+clrMatrix.Matrix33);

// userImgGraphics = Graphics.FromImage(userImg);
userImgGraphics.DrawImage(userImg, new Rectangle(15, 15, userImg.Width,
userImg.Height), 0, 0, userImg.PhysicalDimension.Width,
userImg.PhysicalDimension.Height, GraphicsUnit.Pixel, imgAtt);
// userImgGraphics.Dispose();

// Response.Write("<userImgr>userImg: "+userImg);
}
</script>

Okay, the first thing we need to do is narrow down our field. What you
really want to know is how to create overlapping images with HTML, since
HTML is what ASP.Net produces. This can be done using CSS and absolute
positioning. However, when you say "If the upper image gets transparent, the
background image should be visible," how do you expect "the upper image" to
"get transparent?" Do you figure it will fade with age?

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Neither a follower
nor a lender be.