locked
Change webpage background on the fly (If it worked) RRS feed

  • 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?

    Wednesday, June 29, 2016 11:49 AM

Answers

  • 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');
    };

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 12:14 PM

All replies

  • 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');
    };

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 12:14 PM
  • 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"; 
    Friday, July 8, 2016 9:55 AM