SitePoint Sponsor

User Tag List

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

    Random background image not reliable

    I have the below javascript to place a random background image on a div with an id (headimg). Mostly it works, sometimes it doesn't, and loads nothing.
    Code:
    var theImages=['morhead1', ' morhead2', 'morhead3', 'morhead4', 'morhead5', 'morhead6', 'morhead7', 'morhead8', 'morhead9', 'morhead10', 'morhead11', 'morhead12', 'morhead13', 'morhead14', 'morhead15', 'morhead16', 'morhead17'];
    var p = theImages.length;
    var whichImage = Math.round(Math.random()*(p-1));
    //alert(whichImage);
    addEvent( window, 'load', function() {
    document.getElementById("headimg").style.background="url(images/headpics/"+theImages[whichImage]+".jpg) no-repeat"; } );
    I put an alert in to tell me if it failed on any particular string, and it always fails on 1 (0 is Ok, even though 0 isn't in the array). I have checked that all the images exist and are on the server.
    can someone shed any light on this problem?

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    </body>
    </html>
    
    <html>
    <head>
    <script type="text/javascript">
    <!--
    var imgs = ['agac.bmp', 'saat.bmp', 'ev1.bmp'];
    function nextImg(){
        document.getElementById('changer').setAttribute('src', imgs[Math.floor(Math.random()*imgs.length)]);
        setTimeout('nextImg()', 1000);
        }
    // -->
    </script>
    <title>Untitled</title>
    </head>
    <body onload="nextImg();">
    <div>
    <img src=" " id="changer" alt=""> </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by muazzez
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    </body>
    </html>
    
    <html>
    <head>
    <script type="text/javascript">
    <!--
    var imgs = ['agac.bmp', 'saat.bmp', 'ev1.bmp'];
    function nextImg(){
        document.getElementById('changer').setAttribute('src', imgs[Math.floor(Math.random()*imgs.length)]);
        setTimeout('nextImg()', 1000);
        }
    // -->
    </script>
    <title>Untitled</title>
    </head>
    <body onload="nextImg();">
    <div>
    <img src=" " id="changer" alt=""> </div>
    </body>
    </html>
    Thanks. I will have a look at doing it this way.

    But is there anyway of doing it without the 'body onload' though (I have something else happening on the 'body onload', and would this work as a background, it's for the background of a calender, so it can't be an inline image.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html><head>
    <script type="text/javascript" language="Javascript" >
    resim=new Array(
     "saat.bmp",
     "cicek.bmp",
     "agac.bmp"
    );
    
    function degis(){
    
    var img2 =document.getElementById("img2");
    img2.className="x";
    img2.src=resim[Math.floor(Math.random()*resim.length)];
    
    setTimeout("degis()",5000)
    }
    
    window.onload=degis;
    </script>
    
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1
    }
    </style>
    
    </head>
    <body>
    <div>
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    
    <img id="img2" src="" width="200" height="200">
    
    </div>
    </body>
    </html>
    ......

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thanks for the help.
    It works in IE, but I don't get any image in Firefox, and I have updated the image names and placed in the paths
    Code:
    html><head>
    <script type="text/javascript" language="Javascript" >
    resim=new Array(
     "images/headpics/morhead1.jpg",
     "images/headpics/morhead2.jpg",
     "images/headpics/morhead3.jpg"
    );
    
    function degis(){
    
    var img2 =document.getElementById("img2");
    img2.className="x";
    img2.src=resim[Math.floor(Math.random()*resim.length)];
    
    setTimeout("degis()",5000)
    }
    
    window.onload=degis;
    </script>
    
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1
    }
    </style>
    
    </head>
    <body>
    <div>
    Yazi var burada. Yazi var burada. Yazi var burada. 
    Yazi var burada. Yazi var burada. Yazi var burada. 
    Yazi var burada. Yazi var burada. Yazi var burada. 
    Yazi var burada. Yazi var burada. Yazi var burada. 
    Yazi var burada. Yazi var burada. Yazi var burada. 
    
    <img id="img2" src="" width="200" height="200">
    
    </div>
    </body>
    </html>

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works Opera, Mozilla and Internet Explorer.
    Code:
     
    <html><head>
    <script type="text/javascript" language="Javascript" >
    resim=new Array(
     "saat.bmp",
     "cicek.bmp",
     "agac.bmp"
    );
    
    function degis(){
    
    var div2 =document.getElementById("div2");
    var img = "<img src="+resim[Math.floor(Math.random()*resim.length)]+" width=200 height=300>"
    div2.innerHTML=img ;
    
    setTimeout("degis()",5000)
    }
    
    window.onload=degis;
    </script>
    
    <style type="text/css">
    
    #div {
    position:absolute;
    left:0px;
    top:0px;
    width:200;
    height:300;
    z-index:0
    }
    </style>
    
    </head>
    <body>
    <div id="div" >
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    Yazı var burada. Yazı var burada. Yazı var burada. 
    </div>
    <div id="div2">
    
    </div>
    
    
    
    
    </body>
    </html>
    Last edited by muazzez; Sep 26, 2006 at 15:34.


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
  •