Opción para que las visitas escojan imagen y color de fondo

En Pczeros he visto una explicación muy sencilla para que las visitas puedan cambiar el color de fondo del blog con un simple click, se trata de un gadget con unas imágenes a modo de cuadritos que bien pueden ser cualquier otra imagen, dicha imagen funciona con el evento onclick y al marcar sobre ella cambia el color de fondo del blog.

Para probar he creado unas imágenes de muestra que como decía pueden sustituirse por otras creadas por nosotros, la forma de añadirlo es muy sencilla simplemente copiamos el siguiente código y lo añadimos allí donde deseamos mostrarlo, si se trata de un gadget escogeremos para añadirlo HTML/Javascript.

<div style="text-align: center;">
<a href="#" onclick="javascript:document.body.style.backgroundColor='#AA0104'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEY7Lzr4vJh6lVDcHTZHwRBAu6MjjB_E3FNjj2TyffiMW72e7bD9pFzTSu3i-VGhKKF7K-B4ByUXnFYFeJwEKiZ_vLwLk_kzKIJrnB4kZnfndSG1GHuSlZ2I9d0N25QdZXOk4K1NXfx1Q/s0/rojo2.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#199686'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWSfWldhwgxajbcaGwke04dVKRjeNc9D-b4hBWJerG-iSwFHOWZPMtwLBSZAgZ-ZUCZapLofTwBl-7T8EAgFzSPC7YVx9477_xbJOZeyLqNTG51W15ZUXqAkV25Hu7Viavex1G-VG_TI/s0/azul1.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4N1TcD8mja52CGgA3yTrnLci2Mfeio4ANxnz4WBsFFZ8677Gx_UPFgyKSMqNFhn6hbImvVS13Guq7LepQzW3nq56VqWUnai9n-WRBDd48hzyDzZAcKOs5zlMdmhiYIyC3EcbxGyHaV4/s0/blanco4.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDs4SX-yWTTUzZB5Eyiasm1mbNTfNhmnofU77hODNDRyrU6mbQ-6xKYaoz2aDgynptuf1wUASjaZWEC3g1lfYAuCc2GokUQHP0cSANdvqQ2yuURQYNWmLP9Epzz2BgiVumqIIEpJly-tM/s0/negro3.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#EB6E14'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXOgyveoesH-I-gBm5ktlFv-ufNOMFEoKALgICdE5e4imdK4OEkoa3fh3O0_lU1t-n_3nAfqJC3_aw0Frkeui9iAfC3Nm9rjIR4wRNuq5Qr4Wkd02oJwrEEqS78W4mLomrego3YL8iXY/s0/naranja6.jp" /></a>
</div>

Esto es una imagen, para ver el ejemplo click sobre ella.

Cada cuadrito es una imagen y la url de cada imagen será el enlace que hará cambiar el color de fondo de body.

Si seguimos jugando descubrimos que también es posible hacerlo con texturas en lugar de colores, lo conseguimos de la siguiente forma:

<div style="text-align: center;">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyn9O2Jg1Vph1pVW7wbk1gP3IK2Qsasem6hNGqhtXNjh6Yzjg0fZ6HHiUUaL5oZiVGwBXpUlfdSp9vdYWEyLZPvqzIwhGf-sgrdg9rxsVBNd3gprACJBk0NnivGNhkXs5BRKOCvLafM8/s200/fondo1.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyn9O2Jg1Vph1pVW7wbk1gP3IK2Qsasem6hNGqhtXNjh6Yzjg0fZ6HHiUUaL5oZiVGwBXpUlfdSp9vdYWEyLZPvqzIwhGf-sgrdg9rxsVBNd3gprACJBk0NnivGNhkXs5BRKOCvLafM8/s200/fondo1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QmiCRtP3w_FhBI6GjY1FA3hADc-u_FbQs2pTNdS-Mr2CCgsRjESbDS3ox8lIeV5I7VAHz9GVRYUhPJrDmby0M_jBxFZ6jufcwJwXfmB-QCimYGrKZDJRfRHpr4IyUGO24IrJEQfrivo/s200/fondo2.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QmiCRtP3w_FhBI6GjY1FA3hADc-u_FbQs2pTNdS-Mr2CCgsRjESbDS3ox8lIeV5I7VAHz9GVRYUhPJrDmby0M_jBxFZ6jufcwJwXfmB-QCimYGrKZDJRfRHpr4IyUGO24IrJEQfrivo/s200/fondo2.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZUFtB4avJ5h1fKiatXTdQZqocJazoltVPsZlqhiDjBHfblIdTEouH7PcYZeZbb_xDEmfaVRf3tSTnMuaPSITe2PvNa8Y4CWpffeMTYm5ezvTELxhJ7tE534gMq_daCPg2JlDM3lF6qk/s200/fondo3.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZUFtB4avJ5h1fKiatXTdQZqocJazoltVPsZlqhiDjBHfblIdTEouH7PcYZeZbb_xDEmfaVRf3tSTnMuaPSITe2PvNa8Y4CWpffeMTYm5ezvTELxhJ7tE534gMq_daCPg2JlDM3lF6qk/s200/fondo3.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4XgWd3R4jSLIDSRU4BGtobTBV4_aSc4CyZqiW6x-MAISkrU5_kRDyMDxONJleY2w8zpVV-uVqYEQUs4kEY84FktXSmc4YUlNeUR989nctD6swGNgVb0VDsMAummBQVpp-8cUS2LnpKw/s200/fondo4.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4XgWd3R4jSLIDSRU4BGtobTBV4_aSc4CyZqiW6x-MAISkrU5_kRDyMDxONJleY2w8zpVV-uVqYEQUs4kEY84FktXSmc4YUlNeUR989nctD6swGNgVb0VDsMAummBQVpp-8cUS2LnpKw/s200/fondo4.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4kDcAtPjDzRbzBTO5ABHNe2G2Wae1iVs9-8BqVdba8-W4kopL0sCgWc7lrGmvv3imaCTAP6rcLMKWhSd986KGPv54lXiH8sfPtB4M9ktVDfBQ-art5CpgIcWlROFDnyoN18ui5x7kSM/s200/fondo5.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4kDcAtPjDzRbzBTO5ABHNe2G2Wae1iVs9-8BqVdba8-W4kopL0sCgWc7lrGmvv3imaCTAP6rcLMKWhSd986KGPv54lXiH8sfPtB4M9ktVDfBQ-art5CpgIcWlROFDnyoN18ui5x7kSM/s200/fondo5.jpg" /></a>
</div>

Como se puede ver hemos cambiado backgroundColor por backgroundImage, es necesario añadir la url de la imagen dos veces una para el fondo y otra para la miniatura que mostramos.

El tamaño de las miniaturas lo podemos modificar con width para la anchura y height para la altura.