SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random background image sometimes doesn't work?

    I have a javascript that places a random image from an array in the background of a div, but sometimes it doesn't work?
    I just doesn't place anything in the html, but it does remove the 'default' background, which is done via the CSS.
    here in the Jscript
    Code:
    // header 'calendar' image
    var theImages=['morhead1', ' morhead2', 'morhead3', 'morhead4', 'morhead5', 'morhead6', 'morhead7', 'morhead8', 'morhead9', 'morhead10', 'morhead11', 'morhead12', 'morhead13', 'morhead14', 'morhead15'];
    var p =14;
    //var p = theImages.length;
    var whichImage = Math.round(Math.random()*(p-1));
    addEvent( window, 'load', function() {
    document.getElementById('headimg').style.background="url(images/headpics_cal/"+theImages[whichImage]+".jpg) no-repeat"; } );
    and this is the section of HTML it effects.
    Code:
    <div class="calhead" id="headimg">
    <!--content of header -->
    </div>
    and this is usually the result
    Code:
    <div id="headimg" class="nocalhead" style="background: transparent url(images/headpics/morhead10.jpg) no-repeat"/>
    however when it fails there ends up with no image in the background url string ie. url(images/headpics/).

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should work:

    Code JavaScript:
    // header 'calendar' image
    var theImages=['morhead1', ' morhead2', 'morhead3', 'morhead4', 'morhead5', 'morhead6', 'morhead7', 'morhead8', 'morhead9', 'morhead10', 'morhead11', 'morhead12', 'morhead13', 'morhead14', 'morhead15'];
    var l = theImages.length-1;
    var whichImage = Math.round(Math.random()*l);
    addEvent( window, 'load', function() {
    document.getElementById('headimg').style.background="url(images/headpics_cal/"+theImages[whichImage]+".jpg) no-repeat"; } );

    Edited line 3: I forgot -1
    Last edited by hexburner; Jun 4, 2007 at 06:00.
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hexburner View Post
    Should work:
    Thanks, just tried that out. but now the 'blank' is "images/headpics/undefined.jpg"?
    What I will do is create a image called undefined.jpg, but that's not really a fix as such, it just stops it breaking.

  4. #4
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mediaman_12 View Post
    Thanks, just tried that out. but now the 'blank' is "images/headpics/undefined.jpg"?
    What I will do is create a image called undefined.jpg, but that's not really a fix as such, it just stops it breaking.
    Sorry, logical error:
    var l = theImages.length-1;
    FOR SALE: 1 set of morals, never used, will sell cheap


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
  •