overlap a picture with a smaller picture

I've seen this done on a site and interested in how it is done

You are displaying .jpg images of a property for sale.

Someone buys this property.

You need to add "SOLD" across the pictures without editing the picture it's self

I believe that the "SOLD" is just another picture that is over lapping the first but wondering how this is done if anyone knows?

JP

 

you can do it with php and GD

 

wouldnt that be very browser dependant though?

 

having a look as never though of background images;

I guess you could have something like;

<td background="/images/housepiccy.jpg"><img src="/images/sold.jpg"></td>

long as the "sold.jpg" is smaller than the housepiccy is will display on top.

 

The simplest way to find out is to look at the source. Do you have a link to an example page?

cheers,

gary

 

You can do this using layers as well. I wouldn't recommend it to be honest as if the browser isn't compatible, the layers spread out .... i.e the house and sold image would appear separate. It is ideal to do this in a photo package imo (using layers) and then combining them to form one image so the browser is only dealing with a single image and won't get muddled up.

 

More or less correct but, much like Shawn said, you would be better off making your ‘sold’ image a transparent gif rather than a jpg. This way the sold image could even be the same size as the underlying photo, but as everything except the word ‘sold’ would be transparent, the background image would show through. It should also work on all browsers if setup correctly.

I used to use this method to good effect in a slightly different way with a product site I had when I didn’t want visitors/competitors to easily copy my images. I would make my product photos the background of a table cell and then place a completely transparent gif on top, in the cell its self. I lost count of the number of times customers contacted me to say they had tried to right click and save photos from my site only to end up with blank images. Of course, it didn’t stop the most determined of people from copying the images but it did manage to fool the majority of them. I also used to add to the confusion by putting something like “Inages on this site tracked and protected by PixProtector Software” in the footer – no search could ever find that particular software since it didn’t really exist but it would put you in a good position to sell the secret to anyone that contacted you to ask how it was done (only a few could figure it out by looking at the HTML). I used this method quite some time ago, so I guess there are far simpler solutions available with scripts these days