Topic awaiting preservation: Specifying a Layer to appear ATOP an image

Hi,

I have a real estate listing page. There are small thumbnail images that relate to each listing, so they appear consistently for each property the entire length of the page. We produced an admin system that lets the clients login and make changes to the listings such as making it 'sold', etc. However they now want a SOLD image to appear ON TOP the thumbnal image. For example, a gif image with the word SOLD, and the background being transparent - so the property image 'behind' can still be seen.

Now I would guess that using layers would be the way to go, however I want to know if you can code a layer so that it appears directly ontop (same size) of an image. It would be generated dynamically via asp, so that wherever there was an image (thumbnail) you can specifiy a layer to appear atop it. (eg. login to admin, select a checkbox to specify that listing is sold - and then the SOLD.gif image would appear)

All images appear at the same position from the left of the page (eg 50pxl).


Any help would be appreciated!!

This is more of a CSS question. (Or, at least I can think of a CSS solution)

Use absolute (or possibly relative) positioning to get the images to share the same screen real estate (pun intended).

You will also need to set the z-index of the image and the layer so the layer will have a higer z-index than the image.

-- not necessarily stoned... just beautiful.

I figure since you are using ASP you might be on a windows box. Without having to pay money for an image manipulation program you might have some trouble doing this on the server side (which if you used a different language you would be able to do this). If you have a perl or php functionality you would be able to make a simple script that would create the image for you on the fly, I think this would be possible (could be wrong) by writing the image through the image tag calling a PHP file(<img src="createImage.php" alt="Image Title"/> ) I should probabally test this.

What you would do is use something like imagemagick to create the combined image and then output it. If you have this capabilities of modifying the server, or your server has an image processing functionality such as ASPImage built in you might be able to do this, which would save you time.

There is always the option of making a compiled C or C++ program which would output the combined image and you simply make ASP link to it. I am not a hard core ASP programmer, so I don't know the specifics but I have read that this could be a possibility. I believe it would work similar to the above, instead of calling an image you would call the compiled program <img src="combineImage.asp?img1&img2"/> and ASP runs a system call which returns the Image code from the C program by the ASP file setting its output type correctly (i.e. image/jpg or image/gif). But that is just a guess, that I think should work.

-Dan-

<!-- non sold images -->
<span style="background:url(images/housPic.jpg)"><img SRC="blank.gif" width="100" height="100"></span>

<!-- sold images -->
<span style="background:url(images/housPic.jpg)"><img SRC="sold.gif" width="100" height="100"></span>

images required
- housPic.jpg, the picture of the property
- blank.gif, a transparent blank gif image
- sold.gif, a transparent gif image with the word SOLD.


JavaScript-FX

If your getting different SOLD signs for different width/heights why not server code the images to have the sold sign on them or not. I know Perl can do this and PHP can do it natively (afaik) not sure about asp.

Otherwise If you have absolute positions of all the images it would be very simple just have diff z-indices as mentioned above, not that I read any of the other posts, I probably should have.

THANKS Very Much RoyW!

That is Perfect!! Exactly what I needed.

Cheers again.