Layering Images in ASP.Net 1.1

[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

[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

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,

[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

[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.

"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

[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