Layering Images in ASP.Net 1.1

28 Mar 2005 4:17 PM

Paul Keegstra

Hello,

I am working on a configurator application that needs to have a changing
visual representation of the product being configured. I have a base image
representing the 'core' requirements for the product and the user is able to
select from a variety of optional equipment.

I need to be able to overlay the base image with the corresponding images
for each selected option. This is an asp.net solution for the .Net framework
version 1.1.

Basically, I'd like to select an option, post back to generate the
appropriate image (by overlaying on image on top of the other(s)) and display
the resulting page. Can anyone point me to sample code or a useful tutorial
in this regard?

thanks,

--
Paul

28 Mar 2005 4:43 PM

Brock Allen

You'll have to dynamically generate images on the server using the GDI APIs.
There's a MSDN article on this (for things like PieCharts) here:

http://msdn.microsoft.com/msdnmag/issues/02/02/ASPDraw/

-Brock
DevelopMentor
http://staff.develop.com/ballen

Show quoteHide quote

> Hello,
>
> I am working on a configurator application that needs to have a
> changing visual representation of the product being configured. I
> have a base image representing the 'core' requirements for the product
> and the user is able to select from a variety of optional equipment.
>
> I need to be able to overlay the base image with the corresponding
> images for each selected option. This is an asp.net solution for the
> .Net framework version 1.1.
>
> Basically, I'd like to select an option, post back to generate the
> appropriate image (by overlaying on image on top of the other(s)) and
> display the resulting page. Can anyone point me to sample code or a
> useful tutorial in this regard?
>
> thanks,
>

28 Mar 2005 6:36 PM

darrel

> Basically, I'd like to select an option, post back to generate the
> appropriate image (by overlaying on image on top of the other(s)) and
display
> the resulting page. Can anyone point me to sample code or a useful
tutorial
> in this regard?

alternatively, if you have a controlled user space (ie, you know exactly
what browser they will be using and if they have javascript or not) you
could do this on the front-end as well using transparent GIFs and layered
and positioned divs.

I imagine this is also doable via a Flash interface.

-Darrel

28 Mar 2005 8:25 PM

Paul Keegstra

Your suggestion is kinda what I had in mind, however, I'm not sure how to
implement it. Can you provide me with a link to a basic implementation of
this concept or a sample solution? I am hoping to avoid using a flash
interface - the business team doesn't want to require a flash install to use
the solution.

Show quoteHide quote

"darrel" wrote:

> > Basically, I'd like to select an option, post back to generate the
> > appropriate image (by overlaying on image on top of the other(s)) and
> display
> > the resulting page. Can anyone point me to sample code or a useful
> tutorial
> > in this regard?
>
> alternatively, if you have a controlled user space (ie, you know exactly
> what browser they will be using and if they have javascript or not) you
> could do this on the front-end as well using transparent GIFs and layered
> and positioned divs.
>
> I imagine this is also doable via a Flash interface.
>
> -Darrel
>
>
>

28 Mar 2005 8:54 PM

darrel

> Your suggestion is kinda what I had in mind, however, I'm not sure how to
> implement it. Can you provide me with a link to a basic implementation of
> this concept or a sample solution? I am hoping to avoid using a flash
> interface - the business team doesn't want to require a flash install to
use
> the solution.

Off the top of my head, you'd do something like this:

- create your images in a image-editor with layers (like photoshop or
fireworks).
- export all your layers as transparent gifs.
- Then, you can simply layer them in your web page by using relative
positioning and z-index css attributes. Ie, position every image at the same
x/y coordinates, but give them all different z-indexes.

Then, just turn off/on each layer as needed either via javascript, or do a
postback and just write out the specific images in the HTML.

-Darrel