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)
Full Version: Random Background image in Table
That requires some kind of scripting, e.g. javascript or PHP.
Yup, understand... but do you know what the javascript code would be in MY coding? As many answers as i find online that work in its own html page, every time i insert the code into my own page, it doesn't seem to work. Now i know this is a programer error, but i would like a little help with this one.
know there is a Java scripting solution to this:
http://www.htmlforums.com/client-sid...oad-76206.html
but i do not know how to apply the code into the html, help anyone?
http://www.htmlforums.com/client-sid...oad-76206.html
but i do not know how to apply the code into the html, help anyone?
You copied a shortened URL. Doesn't work.
Take this one for example (just the first I found).
http://www.javascriptkit.com/script/cut176.shtml
That is for BODY, so you need some changes. First give your table an id, like so. The name can be anything.
Then change this line in the script
to this
See? I changed body in the original script to getElementById('foo'). You just need to make it refer to the right thing and it will work. Then you of course need to add the URLs to your images instead of the sample ones.
Take this one for example (just the first I found).
http://www.javascriptkit.com/script/cut176.shtml
That is for BODY, so you need some changes. First give your table an id, like so. The name can be anything.
CODE
<table id="foo">
Then change this line in the script
CODE
document.body.style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
to this
CODE
document.getElementById('foo').style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
See? I changed body in the original script to getElementById('foo'). You just need to make it refer to the right thing and it will work. Then you of course need to add the URLs to your images instead of the sample ones.
I have managed to get it to work with this set of 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);}
<script type="text/javascript">
document.getElementById("td1").className = "background img" + [1,2,3,4,5][Math.floor(Math.random()*5)];
</script>"
It seems to work when i preview in safari, but it doesn't when it is live. 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"> </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&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>
".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);}
<script type="text/javascript">
document.getElementById("td1").className = "background img" + [1,2,3,4,5][Math.floor(Math.random()*5)];
</script>"
It seems to work when i preview in safari, but it doesn't when it is live. 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"> </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&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>
I don't understand how that's supposed to works at all. Could be because of lack of knowledge on my part, I don't know. Why make it so complicated? The simple script I linked to does what you want. What do you need some 50 lines more for?
CODE
<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>
It doesn't matter if you change background if there's an IMG element that obscures it.
QUOTE(pandy @ Sep 20 2012, 06:11 PM) 
Why make it so complicated?
I believe this is the actual script:
CODE
<script type="text/javascript">
document.getElementById("td1").className = "background img" + [1,2,3,4][Math.floor(Math.random()*4)];
</script>
document.getElementById("td1").className = "background img" + [1,2,3,4][Math.floor(Math.random()*4)];
</script>
I'm not familiar with the syntax (starting with square brackets) though, but it seems to work.
BTW the script below seems to be unused ( no ID "background"), but for some reason doesn't cause a script error:
CODE
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]+')';
}
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]+')';
}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.