473,407 Members | 2,306 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,407 software developers and data experts.

Overlapping Images in ASP.NET

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?
Nov 19 '05 #1
3 4529
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.

"Fahad Aijaz" <Fa********@discussions.microsoft.com> wrote in message
news:08**********************************@microsof t.com...
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?

Nov 19 '05 #2
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" schrieb:
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.

"Fahad Aijaz" <Fa********@discussions.microsoft.com> wrote in message
news:08**********************************@microsof t.com...
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?


Nov 19 '05 #3
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.

"Fahad Aijaz" <Fa********@discussions.microsoft.com> wrote in message
news:CE**********************************@microsof t.com... 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>

"Kevin Spencer" schrieb:
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.

"Fahad Aijaz" <Fa********@discussions.microsoft.com> wrote in message
news:08**********************************@microsof t.com...
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?


Nov 19 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Max M | last post by:
I am writing a "find-free-time" function for a calendar. There are a lot of time spans with start end times, some overlapping, some not. To find the free time spans, I first need to convert the...
3
by: Phil Sandler | last post by:
All, I have a table with start and end dates/times in it, and would like to be able to calculate the number of hours represented, accounting for overlapping records. Note that I am looking...
2
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...
1
by: Mitch | last post by:
I have 2 rectangle images. 1 with a box in the upper left corner and the other with a box in the lower right hand corner. Both images are the same size. I would like to display these 2 images so...
4
by: Charlie Brown | last post by:
I have a form with 2 custom controls that can be dragged around by a user. How can I check if they overlap each other without performing some kind of Collision detection on them? Is there...
4
by: =?ISO-8859-15?Q?Jean=2DFran=E7ois?= Lemaire | last post by:
Hello all, I'm learning C and I still am struggling to understand some basic concepts. For example, I read in the standard that with functions such as strcpy, 'If copying takes place between...
1
by: Daimz | last post by:
I am making a blog and as part of my template I am wanting to have my header and then another image on the side of that using the z-index: 2; to make it that layer about. so here is the css. ...
2
by: thephatp | last post by:
I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm...
0
by: richard12345 | last post by:
Hi Guys I have problem with site I am building. The sidebar with menu and other thinks is overlapping footer. The footer move with the content and but it dos it dos not move with the sidebar. ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.