Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Randomize Background Image

    Im making a modeling website for my friend. I would like to display an image on the homepage as a background... I just would like to do multiple. every time a visitor comes to the page, i would like to have a different background image appear. I did find the code in this forum here: http://www.codingforums.com/showthread.php?t=59581

    But here is my dilemma. I havent produced any kind of webpage in a couple years and i am a bit rusty...
    I did find a PHP code that milla jonovichs website using very well. Im using Adobe golive, photoshop, and dreamweaver. (golive and dreamweaver have things that are easier for me to use.) the PHP code doesnt do anything... it doesnt produce errors... just doesnt produce anything. and the javascript... does work. I believe the reason is user error.. lol. Can anyone help me out?

    here is my codeing:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="generator" content="Adobe GoLive">
    <title>Mywebsite</title>

    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>


    <body bgcolor="#b5bcc5" onLoad="MM_preloadImages('images/BioBUTTONup.png','images/GalleryBUTTONup.png','images/ContactBUTTONup.png')">
    <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" background="" cool gridx="10" gridy="10" height="534" showgridx showgridy usegridx usegridy>
    <tr height="10">
    <td width="799" height="10" colspan="5"></td>
    <td width="1" height="10"><spacer type="block" width="1" height="10"></td>
    </tr>
    <tr height="22">
    <td width="10" height="523" rowspan="2"></td>
    <td width="390" height="523" rowspan="2" valign="top" align="left" xpos="10"><img src="images/HomebuttonUP.png" alt="" height="65" width="260" border="0"></td>
    <td width="399" height="22" colspan="3"></td>
    <td width="1" height="22"><spacer type="block" width="1" height="22"></td>
    </tr>
    <tr height="501">
    <td width="144" height="501" valign="top" align="left" xpos="400"><a href="biography.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Biography','','images/BioBUTTONup.png',1)"><img src="images/BioBUTTON.png" name="Biography" width="110" height="35" border="0"></a></td>
    <td width="112" height="501" valign="top" align="left" xpos="544"><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/GalleryBUTTONup.png',1)"><img src="images/GalleryBUTTON.png" name="Gallery" width="80" height="35" border="0"></a></td>
    <td width="143" height="501" valign="top" align="left" xpos="656"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/ContactBUTTONup.png',1)"><img src="images/ContactBUTTON.png" name="Contact" width="80" height="35" border="0"></a></td>
    <td width="1" height="501"><spacer type="block" width="1" height="501"></td>
    </tr>
    <tr height="1" cntrlrow>
    <td width="10" height="1"><spacer type="block" width="10" height="1"></td>
    <td width="390" height="1"><spacer type="block" width="390" height="1"></td>
    <td width="144" height="1"><spacer type="block" width="144" height="1"></td>
    <td width="112" height="1"><spacer type="block" width="112" height="1"></td>
    <td width="143" height="1"><spacer type="block" width="143" height="1"></td>
    <td width="1" height="1"></td>
    </tr>
    </table>
    <p></p>
    </body>

    </html>



    i did place a mad face where i link a single picture... any ideas? please?!?

    i am also aware i asked in the HTML n CSS part, but im hoping there may be HTML code for what i want to achieve?

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You might find this script useful
    Code:
    <script type="text/javascript">
    /*************************************/
    
    * Script by Raymond Angana
    * rangana in Codingforums
    * Created May 8 2008
    
    /*************************************/
    
    /********************************************* edit these values to suit *********************************************/
    var bg1='http://www.digitalphotoguides.com/tuts/background-removal.jpg';
    var bg2='http://www.gmushrooms.com/Posters/LClassicApBlk.jpg';
    var bg3='http://www.gmushrooms.com/Posters/LModernApWht.jpg';
    var bg4='http://3danimation.e-spaces.com/backgrounds/hd_background_american_flag.jpg';
    var bg5='http://www1.istockphoto.com/file_thumbview_approve/5375378/2/istockphoto_5375378_abstract_starburst_background.jpg';
    var bg6='http://www.graphicsarcade.com/backgrounds/dark/dark_background_11.gif';
    
    /*********************************************************************************************************************/
    
    var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
    window.onload=function() {
       num=Math.floor(Math.random()*randBG.length);
       document.body.style.background='url('+randBG[num]+')';
     }
    </script>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    dcdemon813 (05-08-2008)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This may be of interest too.
    It allows for captions as well.
    It will need modifying for your purpose. Use f5 to see it work.

    http://exitfegs.co.uk/aaind.html

    Frank
    Last edited by effpeetee; 05-08-2008 at 09:40 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    dcdemon813 (05-08-2008)

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried the script you showed me... but i just get a black window... yup. how can i modify the script i posted? im not too good at coding... i use adobe! lol. Thanks for your help, The both of ya.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This works for me. Just change the images to suit you.

    I can't help you with your code. I do not do tables.

    Frank

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    </head>
    <body>
    <script type="text/javascript">
    var bg1='11.jpg';
    var bg2='12.jpg';
    var bg3='13.jpg';
    var bg4='14.jpg';
    var bg5='14.jpg';
    var bg6='15.jpg';
    
    
    var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
    window.onload=function() {
       num=Math.floor(Math.random()*randBG.length);
       document.body.style.background='url('+randBG[num]+')';
     }
    </script>
    </body>
    </html>
    Last edited by effpeetee; 05-08-2008 at 10:49 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    This works for me. Just change the images to suit you.

    I can't help you with your code. I do not do tables.

    Frank

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    </head>
    <body>
    <script type="text/javascript">
    var bg1='11.jpg';
    var bg2='12.jpg';
    var bg3='13.jpg';
    var bg4='14.jpg';
    var bg5='14.jpg';
    var bg6='15.jpg';
    
    
    var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
    window.onload=function() {
       num=Math.floor(Math.random()*randBG.length);
       document.body.style.background='url('+randBG[num]+')';
     }
    </script>
    </body>
    </html>
    Hi! I'm not very good at coding, but this bit of code is exactly what I need! I'm wondering though, what I should do if I don't want the background images to repeat in a pattern across the page? I know how to prevent that normally, but not when I'm using this code. Any solutions would be very much appreciated!

  • #7
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Code:
    <SCRIPT LANGUAGE="JAVASCRIPT">
    <--
    var bgNum = Math.round(Math.random() * 5)
    
    bgSel = new Array(6);
    bgSel[1] = "image2.gif";
    bgSel[2] = "image3.gif";
    bgSel[3] = "image4.gif";
    bgSel[4] = "image5.gif";
    bgSel[5] = "image6.gif";
    var base = bgSel[bgNum];
    
    //-->
    </SCRIPT>
    </HEAD>
    <SCRIPT LANGUAGE="JAVASCRIPT">
    <--
    document.write("<BODY BACKGROUND='" + base + "'>");
    //-->
    </SCRIPT>
    Easily done wiith a bit of JavaScript magic!
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    @BabyJack,
    background is a deprecated attribute as well as document.write() and the language attribute.

    @heroprotagonist,

    Basing on frank's code, see if adding highlighted helps:
    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    </head>
    <body>
    <script type="text/javascript">
    var bg1='11.jpg';
    var bg2='12.jpg';
    var bg3='13.jpg';
    var bg4='14.jpg';
    var bg5='14.jpg';
    var bg6='15.jpg';
    
    
    var randBG=[bg1,bg2,bg3,bg4,bg5,bg6]; // Depend on the number of your background images.
    window.onload=function() {
       num=Math.floor(Math.random()*randBG.length);
       document.body.style.background='url('+randBG[num]+') no-repeat';
     }
    </script>
    </body>
    </html>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #9
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @rangana

    That's perfect! Thanks!
    Last edited by heroprotagonist; 08-23-2008 at 10:09 AM.

  • #10
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the great script, rangana!

    How do I make it so that the default background is set to the color black? This is in regards to the script with no-repeat.

    Right now it nullifies my CSS which told the page to have a black background color. As soon as I put in the script it defaults to white.
    Last edited by different; 11-24-2008 at 07:52 PM.

  • #11
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    See if adding highlighted helps:
    Code:
    window.onload=function() {
       num=Math.floor(Math.random()*randBG.length);
       document.body.style.background='#000 url('+randBG[num]+') no-repeat';
     }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    different (11-25-2008)

  • #12
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You are amazing. Thank you so much!

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,775
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    OK, before any more questions about the background position or attachment are arising, here’s a quick hint:

    Basically this line:
    Code:
    document.body.style.background='#000 url('+randBG[num]+') no-repeat'
    does the same as if you were writing
    Code:
    body {background: #000 url(path_to_backgroundImage) no-repeat;}
    in your CSS file. The only difference is that in the JavaScript the image path is replaced with a variable (you could do the same with the background color, for example) and the JS is overriding the external CSS. So, you can just modify the CSS string in the JavaScript to your needs as you would do in the CSS normally. For example if you were writing:
    Code:
    body {background: #000 url(path_to_backgroundImage) top left no-repeat fixed;}
    which comes down to:
    • background color: black
    • background image: [path]
    • background position: top left
    • background repeat: no repeat
    • background attachment: fixed (that means the image doesn’t move if you scroll the page)

    you can write it the same way in the JavaScript with the only exception that the background image path is the above mentioned variable:
    Code:
    document.body.style.background='#000 url('+randBG[num]+') top left no-repeat fixed'

  • #14
    Regular Coder
    Join Date
    Sep 2008
    Location
    Oklahoma
    Posts
    249
    Thanks
    11
    Thanked 13 Times in 13 Posts
    Name your background images in order, say bg1.gif, bg2.gif etc.
    Add this to your php loading code at the top of your page,
    the 1,5 is how many background images you have, start at 1 end at 5.

    <?php $num = rand(1,5); ?>


    add this to your body code

    <body background="images/bg<?php echo $num; ?>.gif">

  • #15
    New to the CF scene
    Join Date
    Jul 2010
    Location
    paris
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello, thanks for your code, it works!!
    But I would like to put the picture in the center of the page with automatic adjstment and not in the left up corner.
    How can I do that.

    Thanks o lot.

    Art.


  •  

    Posting Permissions

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