Como crear una imagen de mi pastilla para insertar en página web o firma en foro

Buenas noches,

He creado una pastilla y no se como transformarla en imagen para que la gente pueda insertarla en sus webs o en la firma en un foro.

Os dejo el enlace para que veáis como queda.

http://telefonica.net/web2/meteosantomera/pastilla1.htm

Sí necesitáis el código fuente lo pego aquí.

Gracias por vuestra ayuda.

tu has creado eso que pone santomera y deseas que otras personas lo cojan y se lo lleben a su web o foro, poniendo el codigo dentro de un <textarea>codigo de tu pastilla</textarea>

Sí, exactamente eso. El código que tengo que poner es lo que desconozco.

si tu lo creaste el codigo deverias saver cual es el codigo que deverias copiar y poner dentro de el <textarea></textarea> porque esa pastilla creo que esta echa en php o javascript porque cambia la numeracion ese codigo lo tienes que copiar y poner dentro del textarea y las personas al estar dentro del textarea lo podran copiar y pegar donde deseen un saludo

Podrías hacer un código en JS que almacenes en tu servidor y otros simplemente poniendo el siguiente código donde quieran ponerlo en su web llegaría:

<script src="http://tuservidor.com/tuarchivo.js"></script>

En el código javascript pondrías algo así:

document.write('CODIGO HTML QUE QUIERES QUE SE VEA EN EL WIDGET');

La pastilla la he creado yo en html y los datos que cambian son tag que me proporciona el programa de la estación meteorológica con los datos.

Te pego el código fuente, a ver si me puedes ayudar por que no entiendo lo que me dices.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>plantilla1</title>
</head>
<body style="width: 220px; height: 110px;">
<span style="font-weight: bold;"></span>
<table
style="text-align: left; background-color: rgb(255, 255, 255); width: 210px; height: 150px;"
border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr align="center">
<td style="background-color: rgb(255, 255, 255); height: 24px;"><span
style="font-weight: bold;">Santomera</span></td>
</tr>
<tr>
<td style="height: 110px;">
<div
style="text-align: center; background-color: rgb(255, 255, 255); height: 110px;"><span
style="font-weight: bold;"><br>
^vxv007^&ordm;C
/ ^vxv005^% / ^vxv121^ l/m2<br style="font-weight: bold;">
</span><span style="font-weight: bold;">^vxv008^
hPa
&nbsp;/ ^vxv001^ ^vxv002^ km/hr<br>
</span><small>^vst143^ &nbsp; ^vst142^ </small><br>
<span style="font-weight: bold;"><a
href="www.meteosantomera.es">www.meteosantomera.es</a></span><br>
</div>
</td>
</tr>
</tbody>
</table>
<span style="font-weight: bold;"></span><br>
<br>
<br>
</body>
</html>

tu pastilla metida dentro de un textarea lo copias y lo pegas donde deseas un saludo

<textarea>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>plantilla1</title>

</head><body style="width: 220px; height: 110px;">
<span style="font-weight: bold;"></span><table style="text-align: left; background-color: rgb(255, 255, 255); width: 210px; height: 150px;" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr align="center">
<td style="background-color: rgb(255, 255, 255); height: 24px;"><span style="font-weight: bold;">Santomera</span></td>
</tr>
<tr>
<td style="height: 110px;"><div style="text-align: center; background-color: rgb(255, 255, 255); height: 110px;"><span style="font-weight: bold;"><br>
16.4&ordm;C/ 87% / 2.8 l/m2<br style="font-weight: bold;">
</span><span style="font-weight: bold;">1018.3hPa&nbsp;/ NNO 0 km/hr<br>
</span><small>23:44 &nbsp; 14/11/12 </small><br>
<span style="font-weight: bold;"><a href="www.meteosantomera.es">www.meteosantomera.es</a></span><br>
</div>
</td>
</tr>
</tbody></table>
<span style="font-weight: bold;"></span><br>
<br>
<br>
</body></html>
</textarea>

El problema que tengo que como van cambiando los datos, lo primero que debo hacer es transformar el código en una imagen, no ?

http://telefonica.net/web2/meteosantomera/pastilla1.htm (Necesito transformar lo que se ve en esta dirección en un archivo de imagen jpg )

Estoy un poco perdido, gracias por vuestra ayuda.

HTML4:

<iframe src="http://telefonica.net/web2/meteosantomera/pastilla1.htm" frameborder="0" scrolling="no" width="225" height="165"></iframe>

HTML5:

<div style="overflow: hidden; border: 0px; height: 165px; width: 225px; padding: 0px;"><object type="text/html" data="http://telefonica.net/web2/meteosantomera/pastilla1.htm" height="165"></object></div>

Ya puedes probarlo.

Ahora sí, perfecto, muchísimas gracias.

Qué diferencia hay entre las dos instrucciones que me das ??

La del HTML5 es la nueva, la otra es la típica HTML4. ¿Resultado visual? - El mismo. ¿Diferencias no visibles? - Mogollón.

Se discute mucho en Internet sobre los iframes (opción HTML4) y hay muchos artículos en blogs y foros dedicados a hacer comparaciones iframe vs object. Puedes poner en Google algo como "object HTML5" y verás.

Gracias de nuevo.