Overlapping images with GD

[azuka]

I'm currently working on a website and had to write a joomla component to display videos [ see http://webdd.org/i55.org/index.php?option=com_experience&Itemid=29 ].

The client wanted to be able to upload a picture, have it resized and super-impose it on a bg, and add an arrow over the entire image. Please look at the above site in Firefox.

I had problems getting the last image [ a transparent png file ] added to the image as the arrow part got colored according to the image underneath it. I decided to use the CSS hack, but since it's buggy in IE, I'm going back to the GD approach. Please advice me on this bit of code:

[code]<?php
//...some code before this

$comp_dir = $mosConfig_absolute_path . '/administrator/components/com_experience/images/video-';

$filename = $dest_dir . strtolower($file['name']); // uploaded file

$image = imagecreatefrompng( $comp_dir . 'bg.png' ); // base bg
$arrow = imagecreatefrompng( $comp_dir . 'arrow.png' ); //arrow file
$src = imagecreatefromjpeg( $filename ); //uploaded file


//imageAlphaBlending($arrow, false); //tried this
//imageSaveAlpha($arrow, false);    //and this -- didn't work

$img_info = getimagesize($filename);

//resize uploaded image ($src) and place on bg ($image)
imagecopyresampled( $image, $src, 7, 8, 0, 0, 74, 66, $img_info[0], $img_info[1] );

//place arrow at position, 69, 60 on $image
imagecopyresampled( $image, $arrow, 69, 60, 0, 0, 20, 23, 20, 23) ;

unlink($filename); //delete uploaded file


imagejpeg( $image, $filename ); // output jpeg file to $filename

imagedestroy($image); //destroy
imagedestroy($src); //all
imagedestroy($arrow); //resources
//... some code after this

?>[/code]