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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Macintosh Random Image on load, in table background?

    I would like to know if there is any way of making my banner image (image background in table) randomise? can anyone help me?

    here is the code for the table:

    .background {
    background-image: url(Images/Bacground.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }



    <table width="1280" border="0" align="center" cellpadding="0" cellspacing="0" class="white">
    <tr>
    <td width="1351" height="300" class="background"><table width="236" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="236"><a href="index.html" target="_self"><img src="Images/logo2.png" width="233" height="262" alt="yoobelogo" /></a></td>
    </tr>
    <tr>
    <td height="60"><p><img src="Images/spacer.png" width="30" height="66" alt="spaccer" /></p></td>


    (for full back code, search the script on yoobe.co.za)

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Murcia, Spain
    Posts
    21
    Thanks
    0
    Thanked 2 Times in 2 Posts
    In php you could dome something like this:

    First create 5 different classes for your background... for example

    .background1{

    }
    .background2{

    }
    ...

    then before you display your html...

    <?php
    $num = rand(1, 5) //this creates a random number between 1 and 5
    ?>

    Then where your table is...

    class="background<?php echo $num; ?>"

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much, but am more comfortable with Java then PHP. or is there and HTML way to fix the problem?

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    vnbenny88's solution is a good backend solution.
    for a front-end solution you could try:

    You need to give you element with the background an id attribute.
    I just used the id 'td1'
    <td width="1351" height="300" class="background img1" id="td1">

    Also note: there are two classes assigned. the base background, and the chosesn imgN.

    the style in the head
    Code:
    .background {
    background-repeat: no-repeat;
    background-position: center top;
    }
    .img1 {background-image: url(images/image1.jpeg);}
    .img2 {background-image: url(images/image2.jpeg);}
    .img3 {background-image: url(images/image3.jpeg);}
    .img4 {background-image: url(images/image4.jpeg);}
    .img5 {background-image: url(images/image5.jpeg);}
    the script at bottom of page
    Code:
    <script type="text/javascript">
    document.getElementById("td1").className = "background img" + [1,2,3,4,5][Math.floor(Math.random()*5)];
    </script>
    The class name of the element will be a combination of the base background class and a selected imgN,
    "background img1" or "background img2" etc..., depending on the random number generated.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there kishue,

    if your server has PHP facilities, it would be much easier and definitely better to use it instead of javascript.

    Your basic page code would look something like this...
    PHP Code:
    <?php
      $bg
    =array('bg-01.jpg','bg-02.jpg','bg-03.jpg'); // array of filenames
      
    $i=rand(0,count($bg)-1); // generate random number size of the array
      
    $selectedBg="$bg[$i]"// set variable equal to which random filename was chosen
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">

    <title></title>

    <style type="text/css">
    .background {
        background-image:url(images/<?php echo $selectedBg;?>);
        background-repeat:no-repeat;
        background-position:center top;
     }
    </style>

    </head>
    <body>

    <div></div>

    </body>
    </html>
    ...which is hardly rocket science.

    Edit: You would need to change the extension from .html to .php of course.


    coothead
    Last edited by coothead; 09-18-2012 at 03:39 PM.

  • #6
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rdspoons View Post
    vnbenny88's solution is a good backend solution.
    for a front-end solution you could try:

    You need to give you element with the background an id attribute.
    I just used the id 'td1'
    <td width="1351" height="300" class="background img1" id="td1">

    Also note: there are two classes assigned. the base background, and the chosesn imgN.

    the style in the head
    Code:
    .background {
    background-repeat: no-repeat;
    background-position: center top;
    }
    .img1 {background-image: url(images/image1.jpeg);}
    .img2 {background-image: url(images/image2.jpeg);}
    .img3 {background-image: url(images/image3.jpeg);}
    .img4 {background-image: url(images/image4.jpeg);}
    .img5 {background-image: url(images/image5.jpeg);}
    the script at bottom of page
    Code:
    <script type="text/javascript">
    document.getElementById("td1").className = "background img" + [1,2,3,4,5][Math.floor(Math.random()*5)];
    </script>
    The class name of the element will be a combination of the base background class and a selected imgN,
    "background img1" or "background img2" etc..., depending on the random number generated.
    Thank you so much, i got it woking with my site, but when its live the images disappear. dont know why?

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the completed code and link to show you: http://www.yoobe.co.za/index2.html



    <!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>
    <meta name="description" content="Yoobe enhances the user experience through interactive content creation.
    Interactive Publishing with Yoobe.co.za" />
    <meta name="msvalidate.01" content="E5D040BB0CDAE8817C0C89849A7D572A" />
    <meta name="" content="3d, 3d images, 3d objects, .epub, epub, epub files, ibook, .ibook, .ibooks, .ibooks files, because life’s interactive, books, brochure, brochures, client, clients, customised service offering, design, designed, designing, ebooks, feel, feeling, graphic, graphics, ibooks, innovate, innovating, innovative, interact, interacting, interactive, interactive conten, interactive material, interactive publishing, interactivity, learn, learning, learning, market, markete, marketing, publish, published, publishing, read , reading, tangibility, tangible, touch, touched, touching, widget, widgets, yoobe, yoobe interactive, because life's interactive" />
    <meta name="Description" content="Yoobe enhances the user experience through interactive content creation.
    Interactive Publishing with Yoobe.co.za" />
    <script type="text/javascript">
    <!--
    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_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_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];}
    }
    function MM_popupMsg(msg) { //v1.0
    alert(msg);
    }
    //-->

    </script>



    <link rel="shortcut icon" href="Images/fav.jpg" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Yoobe</title>
    <style type="text/css" media="screen">
    html, body {
    margin: 0px;


    }
    .botban {
    position: center bottom;
    }
    map area {
    outline:none;
    }
    imagemap area {
    outline:none;
    }
    .imgFix {
    position: absolute;
    bottom: auto;
    margin: 0 auto;
    width: 1280px;
    height: 125px;
    visibility: visible;
    text-align: center;
    vertical-align: bottom center;
    left: 0;
    right:0;
    }
    .bottomban {
    bottom: auto;
    margin: 0 auto;
    }
    body {
    background-image: url(Images/train-metal.jpg);
    background-repeat: repeat;
    background-position:center top;
    margin-top: 0px;
    text-align: center;
    }
    .white {
    background-color: #FFF;
    }
    .background {
    background-repeat: no-repeat;
    background-position: center top;
    }
    .img1 {background-image: url(images/Bacground.jpg);}
    .img2 {background-image: url(images/Bacground2.jpg);}
    .img3 {background-image: url(images/Bacground3.jpg);}
    .img4 {background-image: url(images/Bacground4.jpg);}


    .border {
    background-image: url(Images/repete.jpg);
    background-repeat: repeat-y;
    background-position: center top;
    text-align: center;
    }
    .repete {
    background-image: url(Images/repete.jpg);
    background-repeat: repeat-y;
    text-align: center;
    }
    .repete1 {
    background-image: url(Images/repete.jpg);
    background-repeat: repeat-y;
    text-align: center;
    }
    .backhome {
    background-image: url(Images/logos/images/backhome.jpg);
    background-repeat: repeat-x;
    background-position: top;
    background-color: #FFF;
    }
    </style>

    <script type="text/javascript">


    var pic=new Array();
    pic[0]="Images/Bacground.jpg";
    pic[1]="Images/Bacground2.jpg";

    var num=Math.floor(Math.random()*pic.length);

    window.onload=function() {
    document.getElementById('background ').style.backgroundImage='url('+pic[num]+')';
    }


    </script>

    </head>
    <body onload="MM_preloadImages('Images/logos/images/images/bannericons2_02.png','Images/logos/images/images/bannericons2_03.png','Images/logos/images/images/bannericons2_04.png','Images/logos/images/images/bannericons2_05.png','Images/logos/images/images/bannericons2_0a.png','Images/logos/images/images/bannericons2_0z.png','Images/logos/images/images/bannericons2_0bo.png','Images/logos/images/images/bannericons2_06.png')">
    <table width="1280" border="0" align="center" cellpadding="0" cellspacing="0" class="white">
    <tr>
    <td width="1280" height="360" class="background img1" id="td1"><table width="236" border="0" align="center" cellpadding="0" cellspacing="0"><a href="index.html" target="_self"><img src="Images/logo2.png" width="233" height="262" alt="yoobelogo" /></a>
    <tr>
    <td width="236">&nbsp;</td>
    </tr>
    <tr>
    <td height="66"><p><img src="Images/spacer.png" width="30" height="47" alt="spaccer" /></p></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td class="border"><span class="repete"><span class="repete1"><img src="Images/links.png" alt="links" width="300" height="19" border="0" usemap="#Map2" /></span>
    <map name="Map2" id="Map222">
    <area shape="rect" coords="-7,1,69,22" href="profiles.html" target="_self" />
    <area shape="rect" coords="112,-1,175,18" href="Q&amp;A.html" target="_self" />
    <area shape="rect" coords="211,0,302,20" href="contact.html" target="_self" />
    </map>
    </span></td>
    </tr>
    <tr>
    <td height="816"><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="Images/logos/images/images/Ferures_01.jpg" width="427" height="155" alt="yoobe" /></td>
    <td><img src="Images/logos/images/images/Ferures_02.jpg" width="426" height="155" alt="yoobe" /></td>
    <td><img src="Images/logos/images/images/Ferures_03.jpg" width="427" height="155" alt="yoobe" /></td>
    </tr>
    <tr>
    <td><img src="Images/logos/images/images/Ferures_04.jpg" width="427" height="337" alt="yoobe" /></td>
    <td><img src="Images/logos/images/images/Ferures_05.jpg" width="426" height="337" alt="yoobe" /></td>
    <td><img src="Images/logos/images/images/Ferures_06.jpg" width="427" height="337" alt="yoobe" /></td>
    </tr>
    <tr>
    <td height="323"><img src="Images/logos/images/images/Ferures_07.jpg" width="427" height="323" alt="yoobe" /></td>
    <td><img src="Images/logos/images/images/Ferures_08.jpg" width="426" height="323" alt="yoobe" /></td>
    <td><img src="Images/logos/images/images/Ferures_09.jpg" width="427" height="323" alt="yoobe" /></td>
    </tr>
    </table></td>
    </tr>
    </table>
    <table width="400" border="0" align="center" cellpadding="0" cellspacing="0" class="white">
    <tr>
    <td><img src="Images/logos/images/images/bannericons_01.png" width="733" height="63" alt="spacer" /><a href="mailto:letschat@yoobe.co.za" target="_blank" onmouseover="MM_swapImage('mail','','Images/logos/images/images/bannericons2_02.png',1)" onmouseout="MM_swapImgRestore()"><img src="Images/logos/images/images/bannericons_02.png" alt="mail" name="mail" width="121" height="63" border="0" id="mail" /></a><a href="letschat@yoobe.co.za" target="_blank" onmouseover="MM_swapImage('mail','','Images/logos/images/images/bannericons2_02.png',1)" onmouseout="MM_swapImgRestore()"></a><a href="skype:yoobe.co.za?chat" target="_blank" onmouseover="MM_swapImage('skype','','Images/logos/images/images/bannericons2_0a.png',1)" onmouseout="MM_swapImgRestore()"><img src="Images/logos/images/images/bannericons_03.png" alt="" name="skype" width="66" height="63" border="0" id="skype" /></a><a href="http://twitter.com/yoobe_sa" target="_blank" onmouseover="MM_swapImage('twitter','','Images/logos/images/images/bannericons2_0z.png',1)" onmouseout="MM_swapImgRestore()"><img src="Images/logos/images/images/bannericons_04.png" alt="" name="twitter" width="97" height="63" border="0" id="twitter" /></a><a href="http://www.linkedin.com/company/yoobe" target="_blank" onmouseover="MM_swapImage('linkedin','','Images/logos/images/images/bannericons2_0bo.png',1)" onmouseout="MM_swapImgRestore()"><img src="Images/logos/images/images/bannericons_05.png" alt="" name="linkedin" width="64" height="63" border="0" id="linkedin" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('phone','','Images/logos/images/images/bannericons2_06.png',1)"><img src="Images/logos/images/images/bannericons_06.png" alt="" name="phone" width="76" height="63" border="0" id="phone" onclick="MM_popupMsg('+27 (0)79 823 9382')" onmouseover="MM_swapImage('phone','','Images/logos/images/images/bannericons2_06.png',1)" onmouseout="MM_swapImgRestore()" /><img src="Images/logos/images/images/bannericons2_07.png" alt="spacer1" width="119" height="63" /></a></td>
    </tr>
    <tr>
    <td><img src="Images/logos/images/images/banner_02.png" alt="yoobe" width="1280" height="61" align="top" /></td>
    </tr>
    </table>
    <script type="text/javascript">
    document.getElementById("td1").className = "background img" + [1,2,3,4][Math.floor(Math.random()*4)];
    </script>

    <script type="text/javascript">
    var sc_project=8239249;
    var sc_invisible=1;
    var sc_security="6b3ab8fa";
    </script>
    <script type="text/javascript"
    src="http://www.statcounter.com/counter/counter.js"></script>
    <noscript><div class="statcounter"><a title="tumblr counter"
    href="http://statcounter.com/tumblr/" target="_blank"><img
    class="statcounter"
    src="http://c.statcounter.com/8239249/0/6b3ab8fa/1/"
    alt="tumblr counter"></a></div></noscript>


    </body>
    </html

    ></html>

  • #8
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Rdspoons you've been the only person to come close to the outcome i need without saying PHP, can you help?

  • #9
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    coothead's example is probably the best imo just because it's done with php. Don't rely on JS.

    Regards,

    LC.

  • #10
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Any way the problem can be fixed?

  • #11
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Coothead has given you a really good example there. Copy and paste it and play around with it.

    There isn't much else can be said. The code has been provided for you, I know it can be hard to understand, but that is pretty simple, even I can understand it :P

    Regards,

    LC.

  • #12
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    Coothead has given you a really good example there. Copy and paste it and play around with it.

    There isn't much else can be said. The code has been provided for you, I know it can be hard to understand, but that is pretty simple, even I can understand it :P

    Regards,

    LC.

    Thats great sweety, telling me it works helps so much, but i said i'm not touching Php, i'm not going anywhere near it, and i hate that Php sites are slow to load. read and listen. i want JAVA, easy to insert, better for me. i dont care if that Php coding works, i have stated i am not changing my site to Php. i know there is a Java way of doing this, so can you help me? or you can just stop commenting, because you have been no help so far.

  • #13
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by kishue View Post
    so can you help me?
    Nah, good luck sugarplum

    You probably want to put your code within CODE tags also, which is located above the posting area.

    Kindest regards,

    LC.
    Last edited by LearningCoder; 09-28-2012 at 05:49 PM.

  • #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there kishue,

    to get the problem fixed, remove this...
    Code:
    <script type="text/javascript">
    document.getElementById("td1").className = "background img" + [1,2,3,4][Math.floor(Math.random()*4)];
    </script>
    
    ..completely from the code.

    Then change this...
    Code:
    <script type="text/javascript">
    
    var pic=new Array();
    pic[0]="Images/Bacground.jpg";
    pic[1]="Images/Bacground2.jpg";
    
    var num=Math.floor(Math.random()*pic.length);
    
    window.onload=function() {
    document.getElementById('background ').style.backgroundImage='url('+pic[num]+')';
    }
    
    </script>
    
    ...to this...
    Code:
    <script type="text/javascript">
    
       var pic=new Array();
          pic[0]="Images/Bacground.jpg";
          pic[1]="Images/Bacground2.jpg";
    
       var num=Math.floor(Math.random()*pic.length);
    
    
    function init(){
       document.getElementById('td1').style.backgroundImage='url('+pic[num]+')';
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    coothead

  • Users who have thanked coothead for this post:

    kishue (10-09-2012)

  • #15
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    hi there kishue,

    to get the problem fixed, remove this...
    Code:
    <script type="text/javascript">
    document.getelementbyid("td1").classname = "background img" + [1,2,3,4][math.floor(math.random()*4)];
    </script>
    
    ..completely from the code.

    Then change this...
    Code:
    <script type="text/javascript">
    
    var pic=new array();
    pic[0]="images/bacground.jpg";
    pic[1]="images/bacground2.jpg";
    
    var num=math.floor(math.random()*pic.length);
    
    window.onload=function() {
    document.getelementbyid('background ').style.backgroundimage='url('+pic[num]+')';
    }
    
    </script>
    
    ...to this...
    Code:
    <script type="text/javascript">
    
       var pic=new array();
          pic[0]="images/bacground.jpg";
          pic[1]="images/bacground2.jpg";
    
       var num=math.floor(math.random()*pic.length);
    
    
    function init(){
       document.getelementbyid('td1').style.backgroundimage='url('+pic[num]+')';
     }
       window.addeventlistener?
       Window.addeventlistener('load',init,false):
       Window.attachevent('onload',init);
    
    </script>
    
    coothead

    thank you thank you thank you!!!!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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