SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    south london
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background randomly changing images

    hi guys and girls

    can anyone help with the following code, i trying to make images randomly change in the background. I thinks it a bit of javascript needed but i need the background images to change randomly on every page. does that need to be an external js file for it to be less complicated, anyway here is the code:

    <div id="container">

    <div id="containerleft">
    <h2>website name here</h2>
    </div>

    <div id="containerright">
    <h2>header2</h2>

    </div>

    </div>



    This is in the style sheet
    #containerleft
    {
    float: left;
    width: 350px;
    height: 350px;
    background-image:url(img/catamaran1.jpg);
    border-right: 20px solid #FFF;
    padding: 10px;
    }

    thanks in advance.

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean changing the background once the page is loaded, or that there is a different image when the page loads?

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <head>
    <title> Picture Fun </title>
    <script type="text/javascript" >
    function Ximage()

    {
    var x;
    x = Math.round(Math.random()*3);

    if (x == 0) {
    document.images.face.src ="agac.bmp";
    }
    if (x == 1) {
    document.images.face.src ="ev1.bmp";
    }
    if (x == 2) {
    document.images.face.src ="saat.bmp";
    }
    if (x == 3) {
    document.images.face.src ="KUMANDA.bmp";
    }

    }
    </script>
    </head>

    <body>
    <div style="text-align:center">
    <h2>How do you feel today?</h2>

    <img name="face" src="saat.bmp" alt="face image" />

    <br><br>
    <form name="display">
    <input type="button" value="I am feeling" onClick="Ximage();" />

    </form>
    </div>
    </body>
    </html>



    <script>
    <!--

    var resim1="ev.bmp"
    var resim2="saat.bmp"
    var resim3="KUMANDA.bmp"
    var resim4="agac.bmp"
    var resim5="cicek.bmp"
    var resim6="tablo1.bmp"
    var resim7="tablo2.bmp"
    var resim8="ev2.bmp"
    var resim9="akasya.jpg"
    var resim10="kupZeka.bmp"
    var x=Math.round(Math.random()*9)
    if (x==0) x=resim1
    else if (x==1) x=resim2
    else if (x==2) x=resim3
    else if (x==3) x=resim4
    else if (x==4) x=resim5
    else if (x==5) x=resim6
    else if (x==6) x=resim7
    else if (x==7) x=resim8
    else if (x==8) x=resim9
    else x=resim10

    document.write('<img src='+'"'+x+'"'+' >')

    //-->
    </script>


    ...................................................................................................


    this is aa.htm

    <html><head>
    <script type="text/javascript" language="Javascript" >
    resim=new Array(
    "saat.bmp",
    "cicek.bmp",
    "KUMANDA.bmp"
    );

    function degis(){
    var a =document.getElementById("ad") ;
    a.style.backgroundImage="url("+resim[Math.floor(Math.random()*resim.length)]+")";

    setTimeout("degis()",5000)
    }

    window.onload=degis;
    </script>
    </head>
    <body id="ad">


    </body>
    </html>


    this is bb.htm

    <html><head>

    </head>
    <body>

    <div>
    <iframe src="aa.htm" width="300" height="200"> </iframe>
    </div>
    </body>
    </html>


    random images
    http://www.fiba.com/pages/eng/fe/06_wcm/index.asp

    http://alistapart.com/articles/randomizer/
    Last edited by muazzez; Aug 27, 2006 at 06:55.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    south london
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am after images that change after e.g 5 secs, without doing anything, no hover, no clicking, no fresh page loads, just images that change on their own automatically in the background. can anyone help.

    cheers


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
  •