Imagen y color en body con un click

No sé si recordarán aquella entrada que trataba sobre la forma de invitar a los visitantes a cambiar el color de fondo de blog. Al mismo código le añadimos también una imagen tipo textura de forma que también podíamos cambiar la imagen de fondo.

Lo de hoy es algo muy parecido y responde a una consulta que llegó a mi bandeja de correo, se trata de conservar la imagen de fondo y que esta cambie de color.

Como la imagen tiene el fondo transparente facilita las cosas y aplicado a nuestro blog el bloque de colores quedaría en la sidebar pero el efecto sería en el body (fondo del blog)

Y el código para añadir en un gadget de HTML es el siguiente:

<table border="0" align="center" width="22%" "="" style="cursor:url('http://1.bp.blogspot.com/_q4j3j-ja2ro/sjk-wmzqhji/aaaaaaaalhm/lpvqdwrqyje/s200/icono_lupa.gif'), auto;"><tbody>
<tr> <td><span onmouseover="javascript:document.body.style.backgroundColor='#c96d77'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://4.bp.blogspot.com/-qVNaia9XWjE/TeV2vlHf4SI/AAAAAAAARNk/d_VUCzKwNV4/s1600/rosa-palopng.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFgz76knI5U33E_YE57DKyo6ANvFKDoN5LXinnp-PxUB016xDNjaSNBiqQNAXxMcdXBkhYAgP5piUKMQJS4whh2LcNZVLaEZBdxFvdb4_iu-R6XslObNC_S-EIlHE2trXW0XhXUh8s_Qd/s320/blfondoazul.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzKOCFsOpRbL4J6qy5aRGJszKsLPdMkhea25Ch7dhUqn4HjkRWd_Z5eWN_24X7dBaKkkVGM5d1Py94KNeI2GYDvrnq9XX9jS3ngYTKaJ27A6rRtewzXxPcERIP56RvM62T2cKtE5d3YlzT/s320/blfondonegro.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#98ffff'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://1.bp.blogspot.com/-_l6ow5hGsYk/TeVyPrYYHdI/AAAAAAAARNY/v5YgBZsTBJA/s1600/turquesa.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#FF962D'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHgeBUB6LHK2W5VHbD3UOvSulBNw5DiGnLXa-eXTahnMU7tnLLZUadvofhr0r8IAMtBZu4zcILJtGFyjbH-y3Uvw4CdxgkKisGl_ZwTGguDTku-oCsOxMkipEp_V5iVdaUJkJdq9nq8JV/s320/blfondonaranja.png" /></span></td> </tr>
<tr> <td><span onmouseover="javascript:document.body.style.backgroundColor='#90d0a0'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://3.bp.blogspot.com/-FJtDqiGBsRE/TeVz2GAG3mI/AAAAAAAARNg/0Mty5cqg3bc/s1600/verde.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ED1C24'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyFYhMwQK7UqCdHcXpkE3wekVTbXwS11sxEYL_MGAhEyea-u3jIqXuy2kuM6oap2VuXvxKBVMwQrUHlHLzeCGnTtVXz_cmB7T7RmgtJgr9L_MN3Ny1ffncLA_c8_rHYFqPqOy7Vk_-wWY/s320/blfondorojo.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheJEpbPjG9Hx28yrTyHzFDWizt9FemvA_8bZ0KW1QTv-5dajENhqV2I6sd5o5-KKFJgUmTStMWlWcgDK-uCPPBIjUaufRkSuZucgGo50ZJZ0-4Z6reIYjnbx2ivdWenXhAIyeddsK7TNkb/s400/blfondoblanco.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19b1um3HX6-sZWeu7P3dRQhxn_ky8Fk3XL-jqHG19UcGtRyiX02qn1k4qzArbb7Riw3BxiDoAshOByzZImEoszQnkhyDKzgS-PwPAYJtbWN92sKZwKnodQhZ_RPlyzLPZdvfsTTGrhWXy/s320/blfondorosa.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ccb0e1'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://2.bp.blogspot.com/-qlyIkpS_8I8/TeVy7ilWDII/AAAAAAAARNc/IUveCL-rWvE/s1600/lila.png" /></span></td> </tr>
</tbody></table>

Añadiremos nuestra imagen de fondo en URL-IMAGEN-DE-FONDO-PNG