Let readers select your background image -widget

In the previous post you saw an example in which you can let readers to change the background color.
This post is an extension of the above post & solution to baben's(blog mate) query which empowers your readers to change background image of your blog with the click.
You can add this widget to your blog by making certain minor modifications to the code.

Best use of this could be to change the background image of the footer which can be doen with few modifications
Lets first see an example :Click below image to change background image




<div style="text-align:center;"> Do not like the bottom of the blog?</div><br /> Change it for another! <br /><center><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjraXLJuVQZpxHjISLFXn07G3ct5LR539HePI0B9USgFwjeNhE9m_yqjsry3jjyRwJYT4dyY65hLmcFMD_qIoyLe1xZo9UW8tqT47PoZSqpI5xfPuGiaStb90XXCL_WyasbmWmo96HoYa8i/s400/orange.png)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQupjNke637XrIYS3g9MraCeyX_6CoDCyINaPOd2_DeTGKdVqDtfP2QPWHlbmAJKUCa1PHK04JFCIiU56JZdCC5KlxJOKUupxgPZNSwWIBxIVoOb6AKlOLTsUJMtf3onrrCSzQ83zmZqRo/s200/body-orange.jpg" /></a> <center> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1JuFysnI/AAAAAAAAAKM/AJ1kNfl4Q44 / s400/orange.png) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://4.bp.blogspot. com/_dsEG33PDaHw/S4A2tyL2oXI/AAAAAAAAAK0/9NsvM2bvs-Y/s200/body-orange.jpg "/> </ a><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjfmwQRDvVZK0BF5d91peOy2GGWG_emjJLdWqMGOJFPEntJrVP7KWDCHWJrzGXkoE7G90diyeXV-v60DvRrCNSw8EJxYiVPxqGfOpnb4xloUW9nvpN7eoqQ_6onBd-8uqYCikGMWHD3mL6/s400/luxury-lining.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFlr8UGH9Cl6UDelmoMrvL5dGk2SpD5nHqiZd_dFB5mUa7444fpKnL77dGC_5kcVUYp4v4YdFtulHYJPQZ_YrJ0uuMP-KaYIpiHhyZl_0x5tBiUt1xIypuob_nvbNvzLbvwsXD7q-v9N-/s200/body-luxury.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjfmwQRDvVZK0BF5d91peOy2GGWG_emjJLdWqMGOJFPEntJrVP7KWDCHWJrzGXkoE7G90diyeXV-v60DvRrCNSw8EJxYiVPxqGfOpnb4xloUW9nvpN7eoqQ_6onBd-8uqYCikGMWHD3mL6/s400/ luxury-lining.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://2.bp.blogspot.com / _dsEG33PDaHw/S4A2ttOlZCI/AAAAAAAAAKs/UVjrJY9cDC0/s200/body-luxury.jpg "/> </ a><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxlJuoyl05RRe9fIaTGQS3eNOWrPlbv_VmVJ_6X-Ap2MBf1XngyB1T6qIEfDxzMH5ZCkTTIeSk5x_TL9mXOjLdW3A-dfQ6n1WBiTe_fEEevR_4BgzvFc3hPKFs_b_o0c6KnIwvjpJiOFA/s400/intertwined.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiZomFCPEnr8T5OpSSeU2jhZzfN7HpGiyICBWHoqPlWvm6-qpGrERnpleCwHhEC6oEO5lXorDwRA6rSGdW8C5lEjLB0lakZPfMRJs2xRTLCH5hLd-sn6EPanAt1qSqpxrllxwfH1FsfYWP/s200/body-intertwined.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxlJuoyl05RRe9fIaTGQS3eNOWrPlbv_VmVJ_6X-Ap2MBf1XngyB1T6qIEfDxzMH5ZCkTTIeSk5x_TL9mXOjLdW3A-dfQ6n1WBiTe_fEEevR_4BgzvFc3hPKFs_b_o0c6KnIwvjpJiOFA/s400/ intertwined.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://2.bp.blogspot.com/_dsEG33PDaHw / S4A2tQlatBI/AAAAAAAAAKk/-hYbABUFnEY/s200/body-intertwined.jpg "/> </ a><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNR7zxUW8vXAzdSUTrAOs9tjXjNCk3ox7XmIOwWsgoxk9D_MAJDnr_20Z43EjZGHf9Eo2fg8plDHk2YOATPM8BdtQ-jxzBhSQ7dR8hfjXey4NS8WVkZeuLKdEifE-S5661OTPdNhtFe3P/s1600/dead-revolutionaries.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmv9THyt16BwoVZids94_tN3xC9sYGtl1zqAIIcn537HUQdqeHQwpqLhVLDSUb6q8d8LZPnbI4pt-OhHcCPJprydoH38iHh_YmFZYRV7mKsmsaJVsf94cvtkx4iVehMHGLPn2RVCKHMA8V/s200/body-deadrevo.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNR7zxUW8vXAzdSUTrAOs9tjXjNCk3ox7XmIOwWsgoxk9D_MAJDnr_20Z43EjZGHf9Eo2fg8plDHk2YOATPM8BdtQ-jxzBhSQ7dR8hfjXey4NS8WVkZeuLKdEifE-S5661OTPdNhtFe3P/ s1600/dead-revolutionaries.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://1.bp.blogspot .com/_dsEG33PDaHw/S4A2s33LNFI/AAAAAAAAAKU/zy1HfovQTDQ/s200/body-deadrevo.jpg "/> </a><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJQbsBcd0Rw6itcQyKAL3bNy9t9BIun3sh4pPDesbezdfMMroVP-kE2KnkJoRr8pL67yM3y7zOq6052LJ6BbR_hK4rZXA_TgD20t6DAEOMacAOYpKPiUcO3tjUjjlacbOqDefs8-a3vN2/s400/horton.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheA4wWamnG0f33jP8G5tklR_VApUXFngZAJ6vvfg0ju_Fbr870Disf3YAC2nYLfhX_Z9aHvEuDVzuhr-ZXtVYjWqa6FwK72bfZr-nTuUeDFbhwpXUP3Yk8LEDO4FCOBTQmSGgA9_4wsCtK/s200/body-horton.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJQbsBcd0Rw6itcQyKAL3bNy9t9BIun3sh4pPDesbezdfMMroVP-kE2KnkJoRr8pL67yM3y7zOq6052LJ6BbR_hK4rZXA_TgD20t6DAEOMacAOYpKPiUcO3tjUjjlacbOqDefs8-a3vN2/ s400/horton.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://1.bp.blogspot.com / _dsEG33PDaHw/S4A2tLdeyTI/AAAAAAAAAKc/A73MVxDHcUo/s200/body-horton.jpg "/> </ a></center> </ center><a href="http://myfundoo-blog.blogspot.com/2010/02/let-readers-select-your-background.html"><span style="font-size: xx-small;">Background image widget</span></a>

You can add background images or change this sample, only replace the URL of the image (it is twice) for yours.

 <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url( Image URL )'; document.body.style.backgroundColor='none';"> < img style = "width: 40px; height: 40px;" src = "image URL" /> </a> 

The URL of the image sets twice where indicated, the first is to be applied as wallpaper and the second is an example for the reader to click.