The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Random Background image in Table, Help....
kishue
post Sep 17 2012, 06:46 AM
Post #1





Group: Members
Posts: 9
Joined: 22-August 12
Member No.: 17,648



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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 17 2012, 10:04 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,252
Joined: 10-August 06
Member No.: 7



That requires some kind of scripting, e.g. javascript or PHP.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kishue
post Sep 18 2012, 07:57 AM
Post #3





Group: Members
Posts: 9
Joined: 22-August 12
Member No.: 17,648



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kishue
post Sep 18 2012, 08:14 AM
Post #4





Group: Members
Posts: 9
Joined: 22-August 12
Member No.: 17,648



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2012, 09:00 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,447
Joined: 9-August 06
Member No.: 6



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.

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kishue
post Sep 20 2012, 09:56 AM
Post #6





Group: Members
Posts: 9
Joined: 22-August 12
Member No.: 17,648



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">&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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2012, 11:11 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,447
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 20 2012, 12:43 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,252
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 20 2012, 12:49 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,252
Joined: 10-August 06
Member No.: 7



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>

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]+')';
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 7th December 2019 - 01:59 AM