Menú que cambia el color de fondo del blog al pasar el cursor por encima

0
Category: ,
Se trata de un menú a base de colores que construí con unos simples atributos en javascript, y que, al pasar el cursor sobre cualquier recuadro, el fondo del blog cambia automáticamente al color que la casilla encierra.

Aquí puedes ver una imagen del menú:



Menú que cambia el color de fondo al pasar el cursor por encima


Y aquí encontrarás un ejemplo en funcionamiento.

Para instalarlo en tu blog bastará con seguir estos sencillos pasos:


Diseño>añadir gadget (elemento de página)>html-javascript






Pega este código:

<center><table border="0" style="cursor:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp45Eox-ppGoDFFfQ8zSnUFQXPRZl9qY2qRggynuPw3PaqYSY0-gxCwjJRUpqpKSt1IRU832ZcCw66t5ylBDbzudzF41gD2lcTpsHLxjBvy2v1gkVECIwu9TpQJl0-1JS2x5_u9sostN8/s400/blcursorgif.gif'), auto;"" align="center" width="22%">
<tr>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#d9d13f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6xrx5shVf4DKybO5j_8hHVkEGZnAUILIE0jfUYItnGVZPaWD1ouGVeLVR8iC-uUQhHvrXtv8AhqfZbgCFJba7bONi2ETE2SRPtWmZ7g8nmGWQySg1ZxuBkMR1t1BgET42U8zey4_v1hD/s320/blfondoamarillo.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9uAKGbGEWNCch2EybNuYt0ntjZr1M_VVtEfRWxtuj8uIYj8I-wbinlpOh7aOSDYclOS-KFk3ldH276-WFVb055HuIJYLxehWYxMssLZWVEnZvyhyTtYygSqvAOPPEDC3005SlR8Ta6TC/s320/blfondoazul.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#d9993f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPZ3_mD1hKkq1TGDn36gjFa9jDkUx7_zvFANLqwFIXiM8CKfGcbELAOKbmt8foy3uP7nnrhhGBeYUQixkkj-zWGmti2drQ4ejEQ4Cf9TQ_aduc8NneN7Gu3e61NmoRY1t_vRlNOGk-lzhG/s320/blfondonaranja.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#cccccc'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHB70XXnQdB1T24P4ceU_Jdg3MhsPAMqWCr_hGjr1d0gQFGiqq8MIh0xDvCwG0GFo2u32Er_TtjaDyBVimgjD_Q5zzphtF34QA5TUD_1Omf_XxAXUt-AbNBO7qOB78_zZLuexEG6jHz2th/s320/blfondogris.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvcHzf5YbPf0kug0AXWUe3Zt5haLAF3QhuMf3HS7q3CPRHigvBPuRSo5WqUqPIZD1UoBhqh8et7FGJXV_SlAukH-rkTcbl27ymlmP2dsNx59cox8uE7YPJ23lkN5T_mZ1f-vFOtZ_yGMY/s400/blfondoblanco.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#9b5b1c'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNYp-sZx5Osfj0gE0eY17jmppfnvsPp1xLBe97h82lEV_DZ4d9SMsK97K476LDvyMG6Z6G2k5aR_hs6fOiGtIQceHA_Zr_X4DDRg-zG4rT4FEYHoW5j09ODFYbPxFlHOXjb7FsCmNuqQ_m/s320/blfondomarron.png" /></span></td>
</tr>
<tr>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#57d93f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicww9CcEUhXb7LlYOYuP9087u8R6hEzOzcqasNRuRfDKR9ncMzi3yFQeO9wfFtynyHpwEy9T0u0d2FFMweozUxYgafhzRU5JJ0JTx7WTY9YG6DhyrOqcMj2Ap0AEpR37ZpM-O_6xj13tuO/s320/blfondoverde.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#d9483f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDU8Qq4vEBWBEbuSix9_Y9gvmubPEAYMB1u2-tQS9CmPeDZM87VFEc5Ihlc29VMXb50U-gl7Axtp8eAe8UtGm0U0BlVEI6VAp58yGyR5MCug_EYI_wsuzpevrS2MfsgEkZqX6xhfgTVLz/s320/blfondorojo.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihzbdMeyPeAcYrr3dY4lvqkOHqDDBPCsRvuKJA2TfCq0tJbn5wr4913SazSTy9EMGyGcsmTT-SlyDw70g1cnOs7fvfN3Z-TyZBB9KptvjX7FCL_VcRLXTI39YXIiznQOnFDmcWlQxuMBsI/s320/blfondorosa.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#993fd9'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotW5JOs8S41xP-MkvAlC0AnvTMTU8zLnQnAPx8BXROwajMsqSxsNOKDfnB1d6F_2CEjXlgTXy49Li01WAX8BEFybTS5DVJYzXHVlpCs4oNcBA6YM1by81rjvp3t-dADTJxtTKOKWmKniN/s320/blfondomorado.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0AeD-Fl92Ncpir_Ek5-HiUtLKwT3hWVJ4EKwCswP9eIO9CXG7CJ7ZINHEL1_-YCSCOLoIHz19PmHo88kprdD2qJ3rYDn1O_Cboet-j97dOfzHojK4UBYSUudfVx8EUYR-BbAWzil18Pc/s320/blfondonegro.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#74b8fb'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDRBCWT-tZCeWPOq260sAs8Z-GNN8_tuSYZeY_VMt6yWnU71B2mkU_A4mxnusk5GKMCbjT6nIwVMpZYCLXEK9EDSyoyT5zawgbS3R8gi-m2Qz0X_CEtX6NULyJPdUmsnZTslyBio-bK-r/s400/blfondoazul2.png" /></span></td>
</tr>
</table></center>

Pulsa el botón "Guardar" y habrás terminado.

Aunque en el menú hay bastantes colores, si deseas añadir alguno más o, por el contrario, deshacerte de uno en particular necesitas hacer lo siguiente [+/-]


Si necesitas ayuda durante la instalación no dudes en avisarme.