[SOLVED] overlay one image on top of another using php?

[wmguk]

Hey guys,

 

I'm looking to place a small image over the top of my main product images for special offers.

 

Basically my cart pics are 150px x 150px and i want to place a 150px x 150px transparent image over the top that has a small banner on it saying special offer, when special = on in the database...

 

is there anyway that php can overlay one image on another?

 

Cheers

Drew

[DarkWater]

I'd use CSS and make a class like .prodspecial that positions it over the image then echo the image tag with the class on it in PHP.

[wmguk]

I'd use CSS and make a class like .prodspecial that positions it over the image then echo the image tag with the class on it in PHP.

 

wow, ok, i've never done anything like that before, how would i get text on the top of an image in css?

 

the whole site is using CSS but the images have no class attached to them.

 

--edit

I've used .image { background-image: url(); before, but im thinking the image is found in the database as $pic and it will only be if $special=on...

[wmguk]

ok, ive done some coding but how can i echo a $var in a style CCS?

 

<style type="text/css">

<!--

.image { background-image: url(../images/tiles/<? echo $pic ; ?>)

background-position: top 130px ;}

-->

</style>

 

when i set class="image" nothing happens.

[DarkWater]

1) Don't use short tags.

 

2) Why do you need to dynamically assign the "specials" image?  There should be one "specials" image, and you just echo the normal image in the db with the special class added onto it.

[wmguk]

1) Don't use short tags.

 

2) Why do you need to dynamically assign the "specials" image?  There should be one "specials" image, and you just echo the normal image in the db with the special class added onto it.

 

Well i dont really understand how to get SPECIAL written over the top of the original image.

 

this is the section of code i have to show the image and then write special over it. but all i get is the word special with no image underneath it...

 

if ($row['special'] == "off") { 
echo '<img src="/images/tiles/';
echo $row['pic']; 
echo '" width="150px" height="150px" />';
} else {
echo '<span class="image">SPECIAL</span>';
}

[wmguk]

ok, i know i look REALLY thick lol.... its odd, but ive never tried this before lol

 

right, now my common sense has kicked in.

 

i now have

 

in the .css file

.image {
background-image: url(images/tiles/special.gif);
}

 

on the main page

if ($row['special'] == "off") { 
echo '<img src="/images/tiles/';
echo $row['pic']; 
echo '" width="150px" height="150px" />';
} else {
echo '<img class="image" src="/images/tiles/';
echo $row['pic']; 
echo '" width="150px" height="150px" />';
}

 

but the special.gif doesnt show over the other image.... im guessing because ive set it to image-background, but i cant see any other way to have an image?

[DarkWater]

You can make .image a style that relatively positions that image over another, then echo it out like:

 

<div><img src="/images/tiles/a_picture.jpg" width="150px" height="150px" /><img src="images/tiles/special.gif" class="image" /></div>

 

And have the image class, once again, relatively position the image inside the DIV to overlap the normal image.

[wmguk]

You can make .image a style that relatively positions that image over another, then echo it out like:

 

<div><img src="/images/tiles/a_picture.jpg" width="150px" height="150px" /><img src="images/tiles/special.gif" class="image" /></div>

 

And have the image class, once again, relatively position the image inside the DIV to overlap the normal image.

 

ok, ive got <div><img src="/images/tiles/a_picture.jpg" width="150px" height="150px" /><img src="images/tiles/special.gif" class="image" /></div>

 

however my special comes up directly under the main image, not positioned over it

[DarkWater]

You need to relatively position it in the style.  Can I see your current style?

[wmguk]

.image {

position: relative; top: 150px; right: 150px;

}

 

thats in the .css file, im googling info on absolute position but i think i have it right

[wmguk]

ok, scrub that, i now have

 

.image {

position: relative;

right: 0px;

bottom: 150px;

}

 

and

 

if ($row['special'] == "off") { 
echo '<img src="/images/tiles/';
echo $row['pic']; 
echo '" width="150px" height="150px" />';
} else {
echo '<img src="/images/tiles/';
echo $row['pic']; 
echo '" width="150px" height="150px" /><img src="images/tiles/special.gif" class="image" />';
}

 

problem its it throws everything else out, as the image size of special is still there as white space -

 

http://tiles4u.wicked-websites.co.uk/show_tile.php?colour=blue

[thebadbad]

Got a solution for ya. You'll need to put the two images inside a div which is positioned with CSS (relatively):

 

CSS:

.box {
position: relative;
}

.offer {
position: absolute;
top: 0;
left: 0;
}

 

XHTML:

<div class="box">
<img src="/images/tiles/2.jpg" width="150px" height="150px" alt="" /><img src="images/tiles/special.gif" width="150" height="150" alt="" class="offer" />
</div>

 

Edit: Seems like you found a solution. Whatever works for you

[DarkWater]

Yeah, thebadbad's got it.  I thought he knew to put it in a relatively positioned div. D:

 

Sorry I didn't respond though, I've been working on a GD image effects class.  Works like a charm, just need to add more effects.