Adding image on top of another image??

Hi,

I want to add a special offers label over an image in the corner.

How would i go about doing this as i don't know how to put an image over an image.

Cheers,
Adam

 

look into the createimage* commands in php.. and you can output them with imagegif, imagepng. etc.. to either a buffer or file.


There could be a way to do this in CSS, though I never tried, just thought about it.. you could play around with position:relative; and put 2 images in a div, and move the overlaid image down by the image height and kept to one side. But that depends on browsers and whatnot.

 

Im sure you can do it with imagecopyresampled

 

<?php
header("Content-type: image/png");
$im = @imagecreate(110, 20)
    or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5,  "HUGE SALE", $text_color);
imagepng($im);
imagedestroy($im);
?>

PHP:

All you have to do is overlay this in x and y position of your current image.

If you want another IMAGE then just use the imagecopyresample with another image using the same theory.

 

CSS Method:

Create a div the height and width of the image and use the background attr.

<style>
#overlay {
background: url('path/to/image.jpg');
width: 100px;
height: 100px;
}
</style>
<div id="overlay>
<img src="overlayed-image.jpg" />
</div>


Though if you don't want people to be able to download the original images, then the imagecreate method is best.

 

Thats what I did to make a skin for my XBOX live gamercard
I suggest that method too, however making a div for very image can get annoying

 

You can do it with css the other way around:
.locked {
background:transparent url(offer.gif) no-repeat scroll left top;
display:block;
height:32px;
left:75px;
position:absolute;
top:5px;
width:32px;
z-index:100;
}

<div >
<div class="locked"></div>
<img src="product-image.jpg" />
</div>

 

He is right too you can use z-index

 

I find ImageMagick to be excellent for this purpose. For example:

$cmd = "/usr/bin/convert {$originalImage} -draw \"image Over {$x},{$y} {$w},{$h} '{$overlayImage}'\" {$finalImage}";

exec($cmd);

Where:
$originalImage = the image you want on the bottom layer (filename)
$overlayImage = the image you want to overlay (filename)
$finalImage = the filename to output
$x = x coord to start the overlay
$y = x coord to start the overlay
$w = width
$h = height

Code (markup):

ImageMagick is a pain to get used to, but it works great. It can also automatically handle the MIME types, so you dont have to worry about imagecreatefromjpeg vs imagecreatefrompng.

Hope that helps. CSS is the most flexible solution though, unless you want to prevent people from getting at the original.