Resize image and add an overlay image without using tables and without losing style in xml

Question

I am building a system to create a "fake video embed" with thumbnails and play buttons over them. The images are coming from a service at a standard size, so have no choice but to resize them in HTML. Another restriction is, the codeblock has to be self-contained (like an embed code) and not reliant on any external stylesheets. I'm overlaying a play button as a transparent PNG. My first solution was to set a negative margin on the overlay image with inline css like so:

<div style="width:340px;height:280px;">
<img src="thumbnail.jpg" width="340" height="280"/>
<div style="margin-top:-280px;"><a href="link-to.video.html">
<img src="transparent-embed-overlay.png" 
border="0"></a></div></div>

But in the XML feed for the blog, the transparent play button would "fall off" the "embeds" because it wouldn't recognize the inline style. This forced me into having to write a one-cell table with the image as a background image. But then it was impossible for me to resize the standard image thumbnail I am given, shoehorning me into the default thumbnail size.

FWIW, here's the code I'm resorting to using:

<table width="320" height="240" background="thumbnail.jpg">
<tr><td><a href="link-to-video.html">
<img src="transparent-overlay.jpg" border="0"></a></td></tr></table>

Answer 1

Could you send a link to an example?

From what I understand you are dynamically altering the background tag, but you can not resize a background image without using CSS 3, so compatibility is compromised.

CSS Background property can contain a color, url, positions x, y and repetition.

ie.

background: white url("mypic.jpg") 0 0 no-repeat;

Quirksmode CSS 3 Backgrounds

How come you cannot use an img tag inside the table which you dynamically alter its source to the new image and set the height and width to whatever?

Or if your problem is with the user dragging the images you could simply use a div rather than an image, set its height and width, and place it over the images.