SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Something like that is best done serverside and there are many good articles about. Here's the usual one:

    http://www.alistapart.com/articles/randomizer/

    You could do it with javascript if you don't have serverside access.

    Also the image will spread
    as per the width of the screen
    This really isn't viable unless its a repeating graphic. Usually you would just center the image. You can use complicated methods to stretch an image to the container but the results are usually not very nice.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So u suggest me to go for javascript.
    If you don't have access to serverside code then javascript is the only solution.

    Here is the most basic of scripts.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #header {
        height:100px;
        border:1px solid #000;
        background:#ffffcc url(images/pmoblogob.jpg) no-repeat center center;
    }
    </style>
    <script type="text/javascript"> 
    <!-- 
    if (document.getElementById) { window.onload = swap };
    
    function swap() {
    var numimages=7;
    rndimg = new Array("images/screen2col1.gif", "images/screen2col2.gif", "images/screen2col3.gif", "images/screen2col4.gif", "images/screen2col5.gif", "images/screen2col6.gif", "images/pmoblogoa.jpg"); 
    x=(Math.floor(Math.random()*numimages));
    randomimage=(rndimg[x]);
    document.getElementById("header").style.backgroundImage = "url("+ randomimage +")"; 
    }
    //--> 
    </script>
    </head>
    <body >
    <div id="header"></div>
    </body>
    </html>
    You just populate the array with your images and set the numimages to equal the number of images you have placed there.

    There are much better scripts available and you can find many on google.

    but i feel that will not help me much as i have a big image
    and want to stretch it to the width of the screen
    That sounds like the same things that beginners always try to do but in fact doesn't make much sense and doesn't look very good either.

    How wide is the page?
    Is it fluid or fixed?
    How high is the page?
    What happens to the image when the page is very short or very long?
    What happens to the image when the page is very small or very wide?

    Scaling an image in these scenarios doesn't make much sense. You should use a centred image or a large image that just reveals more as the page gets wider but obviously big image are a bigger filesize.

    You will need to detail in exact what your requirements are as there are so many variables in this. The javascript swapping has nothing to do with these issues and you can simply swap the image once you have sorted the rest.

    However, I don't think you have thought this through carefully yet or I am misunderstanding what you want

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    so i taught if it is posible to change an image as well as its bg image
    at the same time when the page is refreshed then the images will be loaded
    quickly.
    If I understand you correctly you want to load a small (in filesize) gradient image that can be loaded quickly and repeated across the designated area so that there is a background while the bigger filesize image loads.

    If so that you would need two nested elements and on the outer element you would apply the small gradient image and on the inner you would apply the bigger (filesize) image. This will give you some background while the image loads.

    You could more or less use the same JS routine above and set up 2 arrays for the different images and then apply it to the other element (on which you would add an id).

    This is becoming more of a javascript question now I think (I can move the thread to the javascript forum if you think the post is heading more that way than css).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I have put a demo here using 2 background images but this is about the limit of my javascript

    You might want to look at pre-loading the other images but I'm not sure that's a good idea if your images are large as you will force the visitor to load them all.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it working


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •