Change webpage background on the fly (If it worked)

Question

User-971175805 posted

I am trying to change the webpage background based on the user preferences, they have at the moment 5 background images to choose from.

When they click the background image that they want, the code-behind saves the image to a user preferences table in SQL and also updates the users cookie, when the master page is loaded a call to the cookie is made to get the image.

Public MyBg as string

MyBg = "css/image/" & Request.Cookies("tmr")("bgi")

In Code-Behind Master Page, and On the page I have

<script type="text/javascript">
           window.onload = function () {
                function load() {
                    $('#content').css('background', '#000 url(' + <%=MyBg %> + ') center');
                }
            }
</script>

If I view the page source code on a rendered page I can see

       <script type="text/javascript">

            window.onload = function () {
                function load() {
                    $('#content').css('background', '#000 url(' + css/image/ecb.jpg + ') center');
                }
            }

        </script>

All looks good apart from the fact NO image is in the background, can anyone help with this?

Answer 1

User-971175805 posted

Fixed, this is how it should be, thanks to Richard Deeming over at CodeProject . com

window.onload = function() {
    $('#content').css('background', '#000 url(\'<%=MyBg %>\') center');
};

Answer 2

User-1638403417 posted

For a better demo of the system, we will alternate the blue and the orange images.
Here is the complete script:

function changeImage(element)
{
  var x = element.getElementsByTagName("img").item(0);
  var v = x.getAttribute("src");
  if(v == "feed-blue.png")
    v = "feed-orange.png");
  else
    v = "feed-blue.png");
  x.setAttribute("src", v);	
}

The function may be called by a click on the image:

<img id="image0" src="feed-blue.png" onclick="changeImage(this);" /> 

The function may by called also by a form:

<form name="alternate" method="POST" action="">
   <input type="button" value="Change" onclick="changeImage(document.getElementById("image0");">
</form>

Preloading an image

If this is a very big image, it is better to load it first in memory before to display it.
The following code does this:

var z = new Image(); 
z.src = "landscape.jpg";