PNG Images - Merging one with another on a webpage - Site Graphics and Multimedia Design forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

PNG Images - Merging one with another on a webpage

Merging or overlaying one png on top of another

kennyharrill

12:18 pm on Mar 20, 2007 (gmt 0)

We are struggling with a problem in revamping our website. We have images of our many clothing garments and what we are wanting to do is "merge" or "overlay" (at least I think that's the best way to put it) an image of our of our design transfers on the image of the garment (this would show how the transfer would look on the back of a shirt, per se). All of our images are .png format. In testing, we find that some browsers (IE6, Firefox) are working ok, but others (Camino, Netscape, Mozilla, Safari) aren't. We can display a single image with no problem, but we want to combine ours.

Has anyone run across a problem similar to this or do any of you know of a website that uses png images in a similar method to this one? Any help is greatly appreciated. This has caused quite a few headaches and some teeth gnashing as it is.

simonuk

12:23 pm on Mar 20, 2007 (gmt 0)

I don't know much about png but from what you've said the way I'd do it is via CSS.

If you use div tags set to absolute or relative you can give them a "z-index" value. what this means is the highest z-index value will be the one on top.

So if the basic shirt div tag was called "basic" and the logo div was called "logo" by just changing the z-index value on either you could swap around the images.

thecoalman

7:04 pm on Mar 20, 2007 (gmt 0)

I'll suggest the obvious and say create a single image with an image editor, that's assuming of course that you're not trying to do it purely with code.

--------------

I'm assuming your logo has a transparency. If you're using a png with alpha transparency you may want to check for browser support. IE6 for example does not support this except through a hack.

Use the shirt as background image in a DIV and insert the logo using the img tag into the DIV as the "ovelay" should give you consistent results in any browser.

If it still fails you most likely have a problem with alpha transparency support mentioned above.

maccas

7:21 pm on Mar 20, 2007 (gmt 0)

Have you had a look at imagecopymerge [php.net]? Sounds like you need a simple watermark type script. Or have I miss-read your post?