UBB.Developers Forums Community Development Programming PHP and Server-side Scripting layering images

i'm hoping to develop a map of the ski resort i work at, that the groomers (the guys that make the slopes easy to ski on) can enter in which slopes they have groomed on a given evening, and those runs will be highlighted on the map (base image).

is it fairly easy to do image overlays via php? there are about 40 different "runs" that could possibly be overlayed/groomed on any given day... is this the easiest way to go about it, or whould using somethign fancy like flash make it easier.

I would like to do it in php and possibly have a mysql db backend to store the historical data in, it seems like a fun project, but i have yet to do much image manipulation with php.

any help/ideas would be preciated!

Thanks
chillin

This is more of an HTML issue, rather than a PHP one, unless you're talking about generating images dynamically with something like the GD library.

I recently had to figure out how to do this myself. Here's an example:

<img src="background.gif" width="500" height="300" style="position: relative; z-index: 0; top: 0px; left: 0px; display: block;" border="0" />
<img src="overlay1.gif" width="8" height="8" style="position: absolute; z-index: 1; top: 100px; left: 200px; display: block;" border="0" />
<img src="overlay2.gif" width="8" height="8" style="position: absolute; z-index: 1; top: 200px; left: 100px; display: block;" border="0" />

The z-index attribute isn't really needed here. If it's not specified, the images are placed in order of occurrence.

I'm not sure if the display: block attribute matters.

I don't understand the proper usage of position: absolute/relative. I've been using trial and error to decide which to use.

P.S. While you're at it, it would be cool if there were portable trail map displays with a GPS interface that skiers could carry, so they could see exactly where they are on the mountain. I suppose that would have other benefits as well.

Ha, i was just reading up on the zen of z... i think that is the best route as well... so you are saying the order of occurence would dictate which layer is on top? Very cool.

There is actually a compnay out there marketing a GPSR device that you wear while skiing to calculate one's total vertical for a day.

i do think a WAP or possibly a basemap that would be compatible with Garmins would be a nice thing to have, but if you are that hip with your GPS than you should be able to figure out where you are anyways

thanks for the input... i guess i could make this a pretty easy project and leave out the db all together and just use a simple form, that would be too easy tho!

well that approach isn't going to work. i need to be able to print out a bw copy of this grooming map, and using the z: index method means that only the top image is printed... unless i'm missing some obvious setting in IE.

anyone know of any way to pass images to GD or image magick and flatten them?

Hmmmm....

Using an example similar to the one I posted above, I just did tests with both IE 5.5 and Mozilla 1.3a, and all the images were printed, exactly as they were displayed in the browser.

Another method would be to use ALT-Print Screen to copy the active window to the clipboard, and then paste the image into an image editing application such as IrfanView, Paint Shop Pro, or Photoshop, and printing from that application.

If neither of those works for you, try setting z:index: 0 for all the images, or just leaving out that attribute.

hmmm must be my printer, or printer drivers then. I know taht in the print preview window that it *does* show all layers, so as to why it doesn't print them all. I don't know.

I'm using an HPLJ2100 at work I'll try it on my little desk jet here at home and see what happens. I tried setting the z indexes to zero as well, no luck.

Yep, looks like the LJ2100 drivers just don't like that layered image nonsense, worked like a charm on my deskjet.

This is interesting, and a good lesson to see that printing from IE can really be affected by the hardware/drivers locally.

i'm going to run some more tests on other printers at work and see if it happens on most HP Laser Jets or not.

If I remember correctly some HP printers were causing havoc on IE some time ago and that was the reason that a security pactch was created. It so happened that the printer driver in conjunction with IE (printing from) was locking up and was using 100% of the CPU. That's all I remember from this one but I too had a problem with a borrowed printer from a friend. Went back to my HP Deskjet and all is perfect since then.