Div Overlay over an existing .jpg Image

Question

I would like to do the following:

I have an existing .jpg picture from a Webcam.

Now I would like to overlay this Picture with the following Widget:

<div style="width:250px"><a href="http://wetter.webmart.de/782303" target="_blank" style="text-decoration:none">Wetter in Eglisau</a><br /><script src="http://wetter.webmart.de/e/782303"></script></div>

Then the picture should be saved under a new name in the same folder.

Can I do this with a PHP Script?

I have searched tutorials, but the are all for only text or Image over Image etc.

Answer 1

Unfortunately, php can't help you with this. If you need to produce just one single picture, then image editor will do.
But I guess, you need to automate this process with fresh webcam images and weather updates. I would recommend to create a web page with two image as @MilanG suggested using css tricks. After that you can use some headless browser to capture the screen, e.g. PhantomJS http://phantomjs.org/ will do. Again, as I wrote in the beginning, php cannot help you with this task.

Answer 2

You have image manipulation libraries for PHP. i.e.:

http://php.net/manual/en/book.imagick.php

http://php.net/manual/en/book.image.php

if you want that overlay to be part of the image.

Other way use absolute positioning for overlay block, give it higher Z-index and place it over the image.