SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random Image With CSS?

    How can i have a random bg image with pure css?

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, css cannot display random images. You need some other type of language such as javascript or php.

  3. #3
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No i mean i have a banner and its a bg image im looking for a script javascript etc to make it random

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    http://www.javascriptkit.com/script/cut176.shtml

    You could try implementing this somehow.

    Googling for things like these helps.

  5. #5
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeag i saw that but i need something like that but the bg img is CSS

    There its javascript

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Then you need to make additional stylesheets, just like on sites that have switchable themes. And then fish for a javascript that picks a random stylesheet on load.

  7. #7
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there an easier way?

  8. #8
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Not that I know of. I am not an expert on those things, but it seems the obvious way.

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

    I'm not quite sure what you are asking for but if you want to change the background image of an element randomly then one of the scripts mstwntd linked to should do what you want.

    I know nothing of javascript but it seems something like this would work.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
    #banner {
     height:100px;
     border:1px solid #000;
     background:#ffffcc url(images/pmoblogo5.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/pmoblogo7.jpg", "images/pmoblogo6.jpg", "images/pmoblogo5.jpg", "images/pmoblogo4.jpg", "images/pmoblogo3.jpg", "images/pmoblogo2.jpg", "images/pmoblogo.jpg"); 
    x=(Math.floor(Math.random()*numimages));
    randomimage=(rndimg[x]);
    document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")"; 
    }
    //--> 
    </script>
    </head>
    <body >
    <div id="banner"></div>
    </body>
    </html>
    But you may be better off asking someone who knows what they're doing

    Paul

  10. #10
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly what i wanted

  11. #11
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its not working :'(

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    lol - have you got a link to the page in question?

  13. #13
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No its on my computer but i refresh like crazy and nothing

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Heres a working example:

    http://www.pmob.co.uk/temp/randombgimage2.htm

    Are your image paths correct?

    Paul

  15. #15
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres my code

    CSS
    Code:
    #banner{
    background-image:url(images/bannermain.jpg);
    width:607px; 
    height:85px;
    float:left;
    }
    Javascript
    Code:
    if (document.getElementById) { window.onload = swap };
    function swap() {
    var numimages=2;
    rndimg = new Array("images/bannermain.jpg", "images/gba_over.gif"); 
    x=(Math.floor(Math.random()*numimages));
    randomimage=(rndimg[x]);
    document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")"; 
    }
    Banner
    Code:
    <div id="banner"></div>

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

    I just copied your code and put in my images and it worked fine so you must have the incorrect image/path names. Do you have a directory called images with those 2 files in them?

    As you only have 2 random images sometimes the same image will be selected as there is only 2 to choose from. As you can see from my example everything is working ok.

    Paul

  17. #17
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah i dod have them in images director but i link to the javascript file, could that be the problem?

  18. #18
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i uploaded to www.n-wired.com/sitepoint/mai

    edit: the code is in random.js

  19. #19
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed Thanks Guys

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    what was it?

  21. #21
    SitePoint Zealot MadSpikey's Avatar
    Join Date
    May 2004
    Location
    CA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was having problems dou to another pieice of javascript :P

  22. #22
    SitePoint Enthusiast Zapita's Avatar
    Join Date
    Sep 2003
    Location
    mexico
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how can you assign a different link to each image??

    can you set each one a different % to show?? for example, one 50% of the times, anotehr 15%, a third one 35%?

    thanks n-n
    i'm just a girl n_n .. a crazy one!!
    need your logo in vectors? PM me
    \\(*O*)//
    Anime Animated gifs, Kaoani Smilies and Japanese emoticons

  23. #23
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    United States
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would need some sort of database to store how many times each image has been displayed, similar to an ad tracking system.

    -J

  24. #24
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im having issue displaying the images. on the page i get this code displaying

    Code:
     2:27 AM 8/17/2009 if (document.getElementById) { window.onload = swap }; function swap() { var numimages=2; rndimg = new Array("Images/FIL3902.JPG", "Images/FIL3903.JPG", "Images/FIL3904.JPG", "Images/FIL3905.JPG", "Images/FIL3906.JPG"); x=(Math.floor(Math.random()*numimages)); randomimage=(rndimg[x]); document.getElementById("picture").style.backgroundImage = "url("+ randomimage +")"; }
    i put the script in the head part and added the

    Code:
     div#picture{
    background-image:url(Images/FIL3908.jpg);
    width:607px; 
    height:85px;
    float:left;
    }
    in the styles sheet. but it isnt working for me. any help please

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You have 5 images so you need to change the variable to 5.
    Code:
    var numimages=5; 
    I assume this code isn't present in your actual script:
    Code:
     2:27 AM 8/17/2009
    Get rid of it if it is.

    If it's still not working provide a link or the full html/css.


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
  •