Web Analytics Made Easy - StatCounter Random Background Image Problem - CodingForum

Announcement

Collapse
No announcement yet.

Random Background Image Problem

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Random Background Image Problem

    Hi im having a dumbass problem its probably something stupid as it always is with me. Basically ive incorporated a javascript random image background. It works however it occasionally displays a WHITE bg, as if its trying to link to one of the images in the array and its not there. To get what i mean view the link below and click REFRESH until it goes white.

    http://www.focuswebs.co.uk/clients/hollie

    Im new to web design and all this lark but have a basic in all areas. I know that arrays usually start from 0 or something but i think theres osmething in this code to change that. If any one can help, it would be much appreciated!

    This is the code at the top of the page:

    Code:
    <script language="JavaScript" type="text/JavaScript">
<!--
<!-- Activate cloaking device
var randnum = Math.random();
var inum = 14;
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "images/bg1.gif"
images[2] = "images/bg2.gif"
images[3] = "images/bg3.gif"
images[4] = "images/bg4.gif"
images[5] = "images/bg5.gif"
images[6] = "images/bg7.jpg"
images[7] = "images/bg7.gif"
images[8] = "images/bg8.gif"
images[9] = "images/bg9.gif"
images[10] = "images/bg10.jpg"
images[11] = "images/bg11.gif"
images[12] = "images/bg12.gif"
images[13] = "images/bg13.gif"
images[14] = "images/bg14.gif"
var image = images[rand1]
// Deactivate cloaking device -->
</script>
    This code is found at the bottom of the page:

    Code:
    <script language="JavaScript" type="text/javascript">
<!-- Activate cloaking device
document.write('<body background="' + image + '" text="blue" link="blue" alink="blue" vlink="blue">')
// Deactivate cloaking device -->
</script>
    thanks in advance

    regards ian
    Tags: None
  • #2
    PHP Code:
    <body .....>
    ...
    document.body.style.backgroundImage = image;
    ...
    </    body> 
    so happy, so cool

    http://coolersport.info

    Comment

    • #3
      dungsport are u suggesting a php method or what i dont get it sorry? im not familiar with it if you are?

      ian

      Comment

      • #4
        Sorry mate, putting thing in PHP tag just to make it colorful and readable. They are surely HTML.

        Instead of having this

        Code:
        <script language="JavaScript" type="text/javascript">
<!-- Activate cloaking device
document.write('<body background="' + image + '" text="blue" link="blue" alink="blue" vlink="blue">')
// Deactivate cloaking device -->
</script>
        I have this:

        PHP Code:
        <script language="JavaScript" type="text/javascript">
        <!--         Activate cloaking device
        document        .write('<body background="' + image + '" text="blue" link="blue" alink="blue" vlink="blue">')
        // Deactivate cloaking device -->
        </script> 
        BTW, replace your code at the end of the page with this:

        PHP Code:
        <script language="JavaScript" type="text/javascript">
        <!--         Activate cloaking device
        document        .body.style.backgroundImage = image;
        // Deactivate cloaking device -->
        </script> 
        Sorry for the confusing bit,
        so happy, so cool

        http://coolersport.info

        Comment

        • #5
          ok my friend thankyou, im new here so im still getting used to bits. I dropped the code in:

          Code:
          document.body.style.backgroundImage = image;
          as opposed to the mess at present=

          Code:
          document.write('<body background="' + image + '" text="blue" link="blue" alink="blue" vlink="blue">')
          and it still doesnt work? breaks the code completely?

          any ideas

          Comment

          • #6
            Did you put your <body> tag correctly in the page. I dont know why you print the <body> tag using js, this is not right (unless you echo it from server side).

            I will rewrite your html file in whole, your extra stuff in it will be shown as ...

            <html>
            <head>
            ...
            <script language="JavaScript" type="text/JavaScript">
            <!--
            <!-- Activate cloaking device
            var randnum = Math.random();
            var inum = 14;
            var rand1 = Math.round(randnum * (inum-1)) + 1;
            images = new Array
            images[1] = "images/bg1.gif"
            images[2] = "images/bg2.gif"
            images[3] = "images/bg3.gif"
            images[4] = "images/bg4.gif"
            images[5] = "images/bg5.gif"
            images[6] = "images/bg7.jpg"
            images[7] = "images/bg7.gif"
            images[8] = "images/bg8.gif"
            images[9] = "images/bg9.gif"
            images[10] = "images/bg10.jpg"
            images[11] = "images/bg11.gif"
            images[12] = "images/bg12.gif"
            images[13] = "images/bg13.gif"
            images[14] = "images/bg14.gif"
            var image = images[rand1]
            // Deactivate cloaking device -->
            </script>
            </head>
            <body text="blue" link="blue" alink="blue" vlink="blue">
            ...

            <script language="JavaScript" type="text/javascript">
            <!-- Activate cloaking device
            document.body.style.backgroundImage = image;
            // Deactivate cloaking device -->
            </script>
            </body>
            </html>
            so happy, so cool

            http://coolersport.info

            Comment

            • #7
              I know i must seem annoying but no luck my friend! i have doen exactly as you have said! as you can see- Is this piece of code youve modified definetly why im getting and occasional white background?

              thanks for you help il b sure to let people know how helpful you are!

              Code:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>.:: Hollie Parmenter : Links ::.</title>
<meta name="description" content="Hollie Parmenter, UK / Singapore based freelance proffesional photographer, services cater for wide audience. Portraits, Landscapes, Weddings, Custom Photogrpahy, and Events. Very competitivley priced work with a friendly smile.">
<meta name="keywords" content="Hollie Parmenter, www.hp-photography.co.uk, www.hollieparmenter.co.uk, camera, photography, film, enlargements, prints, events, event photographer, music photogrpaher, portrait, album artwork, album photographer, Band Photographer, Tour Photographer, Live Photos, Photographs, Press Shots, Promotional Shots, Photographer for bands, Photographer wanted, Portfolio, Black and White, Egypt Photos, Singapore Photos, Stock Photos, Royalty Free Photos, Images">
<meta name="author" content="Ian Haydon, www.focuswebs.co.uk, www.ianhaydon.co.uk">
<meta name="copyright" content="Copyright 2006 Hollie Parmenter, Essex">
<meta name="custodian" content="Hollie Parmenter, Essex">
<meta name="owner" content="Hollie Parmenter, Essex">
<meta name="robots" content="ALL">
<meta name="revisit-after" content="10 days">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" >
<script language="JavaScript" src="sleight.js" type="text/JavaScript"></script>

[B]<script language="JavaScript" type="text/JavaScript">
<!--
<!-- Activate cloaking device
var randnum = Math.random();
var inum = 14;
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "images/bg1.gif"
images[2] = "images/bg2.gif"
images[3] = "images/bg3.gif"
images[4] = "images/bg4.gif"
images[5] = "images/bg5.gif"
images[6] = "images/bg7.jpg"
images[7] = "images/bg7.gif"
images[8] = "images/bg8.gif"
images[9] = "images/bg9.gif"
images[10] = "images/bg10.jpg"
images[11] = "images/bg11.gif"
images[12] = "images/bg12.gif"
images[13] = "images/bg13.gif"
images[14] = "images/bg14.gif"
var image = images[rand1]
// Deactivate cloaking device -->[/B]
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];}
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body { 
	overflow: hidden; 
}
body {
	scrollbar-base-color: #CCCCCC;
	scrollbar-arrow-color: #000000;
	scrollbar-3dlight-color: #000000;
	scrollbar-highlight-color: #C7C9C8;
	scrollbar-track-color: #f3f3f3;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #999999;
}
a:visited {
	color: #999999;
}
a:hover {
	color: #666666;
}
.style5 {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; }
#Layer1 {
	position:absolute;
	left:165px;
	top:102px;
	width:151px;
	height:204px;
	z-index:1;
}
.style7 {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
}
.style8 {font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; font-weight: bold; }
-->
</style></head>
[B]<body text="blue" link="blue" alink="blue" vlink="blue">[/B]
<body onLoad="MM_preloadImages('images/icon_firefox.gif','file:///C|/Documents and Settings/Mark Haydon/Desktop/hollieparmenter.co.uk/images/ianhaydon_over.gif','file:///C|/Documents and Settings/Mark Haydon/Desktop/hollieparmenter.co.uk/images/ianhaydon_over.png')">
<script language="JavaScript" src="bgsleight.js" type="text/JavaScript"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" background="images/gradient_top.png" scope="col" background-repeat="no-repeat"></td>
    <td width="165" height="30" align="left" background="images/gradient_top.png" scope="col" background-repeat="no-repeat"><img src="images/film1.png" alt=".:: Film ::." width="165" height="30"></td>
    <td height="30" background="images/gradient_top.png" scope="col" background-repeat="no-repeat"></td>

  </tr>
  <tr>
    <td width="635" rowspan="2" align="left" valign="bottom" background="images/bgmenu.png" scope="col" background-repeat="no-repeat"><img src="images/menu.png" alt=".:: Menu ::." width="635" height="95" border="0" usemap="#Map"></td>
    <td width="165" height="80" align="left" scope="col" background-repeat="no-repeat"><img src="images/film2.png" alt=".:: Film ::." width="165" height="80"></td>
    <td height="80" scope="col" background-repeat="no-repeat"></td>
  </tr>
  <tr>
    <td width="165" height="15" align="left" background="images/gradient_middle.png"><img src="images/film3.png" alt=".:: Film ::." width="165" height="15"></td>
    <td height="15" background="images/gradient_middle.png"></td>

  </tr>
  <tr>
    <td height="15" bgcolor="#FFFFFF"></td>
    <td width="165" height="15" align="left" bgcolor="#FFFFFF"><img src="images/film4.png" alt=".:: Film ::." width="165" height="15"></td>
    <td height="15" bgcolor="#FFFFFF"></td>
  </tr>
  <tr>
    <td height="56" align="left" valign="top" bgcolor="#CCCCCC"><a href="http://www.hollieparmenter.co.uk"><img src="images/hollie.png" alt=".:: Click here to return to homepage ::." width="635" height="56" border="0"></a></td>
    <td width="165" height="56" align="left" valign="top" bgcolor="#CCCCCC"><img src="images/film5.png" alt=".:: Film ::." width="165" height="56"></td>

    <td height="56" align="left" valign="top" bgcolor="#CCCCCC"></td>
  </tr>
  <tr>
    <td height="274" align="left" valign="top" bgcolor="#FFFFFF"><table width="634" height="260" border="0" cellspacing="15" bordercolor="#FFFFFF" bgcolor="#FFFFFF" style="margin-bottom: -4px;">
      <tr>
        <td width="200" height="114" align="left" valign="top" bgcolor="#F3F3F3" scope="row"><img src="images/links.png" alt=".:: Links ::." width="55" height="20">
          <table width="100%" height="94" border="0" align="center" valign="top" cellpadding="0" cellspacing="5">
            <tr>
              <td height="84" align="left" valign="top" scope="col"><div align="justify">

                <p class="style7">Welcome to the official website of Hollie Parmenter. This site will give you a brief insite into my styles stuff poo cats and dogs if you like cats an dogs you will love my site.</p>
              </div></td>
            </tr>
          </table>          </td>
        <td width="385" rowspan="2" align="left" valign="top" bgcolor="#F3F3F3" scope="row"><table width="100%" height="238" border="0" cellpadding="0" cellspacing="5">
            <tr>
              <th height="187" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>

                  <td align="left" valign="middle" class="style8" scope="col">http://www.photography1.co.uk</td>
                </tr>
                <tr>
                  <td align="left" valign="middle" class="style7">first class photographers </td>
                </tr>
                <tr>
                  <td height="5"></td>
                </tr>

                <tr>
                  <td class="style7"><strong>http://www.phototgraphy2.co.uk </strong></td>
                </tr>
                <tr>
                  <td align="left" valign="middle" class="style7">second class photographers </td>
                </tr>
                <tr>
                  <td height="5" align="left" valign="middle" class="style7"></td>

                </tr>
                <tr>
                  <td height="5" class="style7"><strong>http://www.photography3.co.uk</strong></td>
                </tr>
                <tr>
                  <td><span class="style7">third class photographers</span></td>
                </tr>
                <tr>

                  <td height="5"></td>
                </tr>
                <tr>
                  <td class="style7"><strong>http://www.photography4.co.uk</strong></td>
                </tr>
                <tr>
                  <td align="left" valign="middle"><span class="style7">third class photographers</span></td>
                </tr>

              </table></th>
            </tr>
          </table>          </td>
      </tr>
      <tr>
        <td height="99" align="left" valign="top" bgcolor="#F3F3F3" scope="row"><img src="images/sitecredits.png" alt=".:: Site Credits ::." width="120" height="20">
          <table width="100%" height="83" border="0" cellpadding="0" cellspacing="5">
            <tr>

              <th align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="style8" scope="col">http://www.ianhaydon.co.uk</td>
                </tr>
                <tr>
                  <td height="5"></td>
                </tr>
                <tr>

                  <td><strong class="style7">http://www.focuswebs.co.uk</strong></td>
                </tr>
                <tr>
                  <td height="5"></td>
                </tr>
                <tr>
                  <td class="style7"><strong>http://www.lcn.com</strong></td>
                </tr>

                
                
              </table></th>
            </tr>
          </table></td>
      </tr>
    </table></td>
    <td width="165" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/film6.png" alt=".:: Film ::." width="165" height="274"></td>
    <td width="178" height="274" align="left" valign="top" bgcolor="#FFFFFF"></td>
  </tr>
  
  
  
  
  <tr>

    <td height="5" colspan="4" align="center" valign="middle" bgcolor="#B0B0B0"></tr>
  <tr>
  <td height="25" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC"><table width="730" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th width="15" scope="row"></th>
      <td width="22" valign="middle"><img src="images/ed-flag.gif" alt=".:: England ::." width="22" height="15"></td>
      <td width="6"></td>
      <td width="22" valign="middle"><img src="images/sn-flag.gif" alt=".:: Singapore ::." width="22" height="15"></td>
      <td width="554" align="center" valign="middle"><span class="style5"><a href="http://www.hollieparmenter.co.uk">http://www.hollieparmenter.co.uk</a> &copy; Copyright   2006<strong> Hollie Parmenter</strong>. All Rights Reserved</span><a href="http://www.mozilla.com/firefox/" target="_blank" onMouseOver="MM_swapImage('Image4','','icon_firefox.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('w3c complaint','','w3c_css2.gif',1)"></a></td>

      <td width="80" height="15"><a href="http://www.mozilla.com/firefox" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/icon_firefox.gif',1)"><img src="images/icon_firefoxgrey.gif" alt=".:: Award winning web browser, Surf smarter ::." name="Image13" width="80" height="15" border="0"></a><a href="http://www.mozilla.com/firefox" target="_blank" onMouseOver="MM_swapImage('Image4','','images/icon_firefox.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
      <td width="31" height="15" align="center" valign="middle"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','file:///C|/Documents and Settings/Mark Haydon/Desktop/hollieparmenter.co.uk/images/ianhaydon_over.gif',1)"></a><a href="http://www.ianhaydon.co.uk" target="_blank" onMouseOver="MM_swapImage('Image17','','images/ianhaydon_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/ianhaydon.gif" alt=".:: www.ianhaydon.co.uk ::." name="Image17" width="19" height="15" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','file:///C|/Documents and Settings/Mark Haydon/Desktop/hollieparmenter.co.uk/images/ianhaydon_over.png',1)"></a></td>
    </tr>
  </table>
  </tr>
  <tr>
    <td height="15" colspan="4" bgcolor="#FFFFFF"></td>
  </tr>
  <tr>

    <td height="15" colspan="4" background="images/gradient_middle2.png"></td>
  </tr>
  <tr>
    <td height="0" colspan="4"></td>
  </tr>
</table>
[B]<script language="JavaScript" type="text/javascript">
<!-- Activate cloaking device
document.body.style.backgroundImage = image;
// Deactivate cloaking device -->
</script>[/B]
<map name="Map">
<area shape="poly" coords="20,94,15,72,113,42,112,94,113,93" href="index.htm" target="_self" alt=".:: Home ::.">
<area shape="poly" coords="115,24,234,24,236,47,211,46,206,94,115,94" href="workwithme.htm" target="_self" alt=".:: Work with me ::.">
<area shape="poly" coords="208,94,212,47,291,53,301,94" href="gallery.htm" target="_self" alt=".:: Gallery ::.">

<area shape="poly" coords="302,94,285,34,402,3,410,31,404,31,397,93" href="contact.htm" target="_self" alt=".:: Contact ::.">
<area shape="poly" coords="398,94,405,33,524,42,518,94" href="cv.htm" target="_self" alt=".:: Curriculam Vitae ::.">
<area shape="poly" coords="520,93,522,57,619,51,623,94" href="links.htm" target="_self" alt=".:: Links ::.">
</map></body>
</html>
              If im being dumb i apologise greatly for wasting your time!

              Comment

              • #8
                Oops! Sorry dude, my bad. It was me wasting your time, LOL. It should be:

                document.body.style.backgroundImage = 'url('+image+')';

                or

                document.body.background = image;

                I have tested with your code. You won't get it wrong.
                Last edited by dungsport; Sep 29, 2006, 09:04 AM.
                so happy, so cool

                http://coolersport.info

                Comment

                • #9
                  right! im back- Im not sure if it works dungsport both pieces of code appear to work when tried. (it still changes the background) but im still getting white backgrounds occasionally. Its really annoying i dont no what it could be!?

                  thanks for your help so far

                  Comment

                  • #10
                    One possible problem...Did you verify all of your images are referenced correctly (filename and extension)? Seems odd you'd have:

                    images[6] = "images/bg7.jpg"
                    images[7] = "images/bg7.gif"
                    ><((((؛>`·.¸¸.·´¯`·.¸.·´¯`·...¸><((((؛>`·.¸¸.·´¯`·.¸¸.·´¯`·.. ><((((؛>`·.¸¸.·´¯`·.¸.·´¯`·...¸><((((؛>

                    Comment

                    • #11
                      Originally posted by fishluvr View Post
                      One possible problem...Did you verify all of your images are referenced correctly (filename and extension)? Seems odd you'd have:

                      images[6] = "images/bg7.jpg"
                      images[7] = "images/bg7.gif"
                      I just checked those URIs and it seems that bg7.gif doesn't exist. A non-existing referenced image would explain the occassional missing background image and thus the (white) background color being shown instead.

                      Originally posted by iandaman View Post
                      Code:
                      document.body.style.backgroundImage = image;
                      […] and it still doesnt work? breaks the code completely?
                      The reason that style.backgroundImage was suggested is because having multiple body elements in a page produces invalid code. You're using document.write to write a second such (invalid) element into the document structure; if you're going to do that you should at least remove the old body element first. The correct method is to alter the relevant CSS (Cascading Style Sheets) code, hence the JavaScript style property; the JavaScript backgroundImage property is equivalent to the CSS background-image property. It actually makes more sense to set a background image for the page on the root element though (html) instead of the body element; you can do that like this:

                      Code:
                      document.getElementsByTagName("html")[0].style.backgroundImage = "url(\"" + image + "\")";
                      In that code, I targeted the first occurrence ([0]) of the html element in the document. That's equivalent to the following CSS, assuming the first entry in your array:

                      Code:
                      html {
  background-image: url("images/bg1.gif");
  }
                      Since you no longer need to utilize document.write, you can move the relevant JavaScript to the head section of your page.

                      Additionally, and on another note, there are several HTML attributes in your code that should also be relegated to CSS; you can see which attributes these are by validating your HTML. You may want to read this to understand why your page is displaying in quirks mode (backward-compatibility mode) and how to fix that. Your code overall could also be more efficient if you condensed your CSS rules, properties, and values; replaced deprecated attributes with the corresponding CSS; and used semantically correct code.

                      One more thing: you might want to spell “curriculum vitae” correctly.

                      Comment

                      Previous template Next
                      Working...
                      X