Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Random Image on load, in table background?

Before you post, read our: Rules & Posting Guidelines

Reply
Page 1 of 2 1 2
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-17-2012, 03:43 PM   PM User | #1
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
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)
kishue is offline   Reply With Quote
Old 09-18-2012, 11:34 AM   PM User | #2
vnbenny88
New Coder

 
Join Date: Sep 2012
Posts: 11
Thanks: 0
Thanked 1 Time in 1 Post
vnbenny88 is an unknown quantity at this point
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; ?>"
vnbenny88 is offline   Reply With Quote
Old 09-18-2012, 02:05 PM   PM User | #3
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
Thank you so much, but am more comfortable with Java then PHP. or is there and HTML way to fix the problem?
kishue is offline   Reply With Quote
Old 09-18-2012, 02:59 PM   PM User | #4
rdspoons
New Coder

 
Join Date: Jun 2009
Posts: 81
Thanks: 0
Thanked 8 Times in 8 Posts
rdspoons is on a distinguished road
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.
rdspoons is offline   Reply With Quote
Old 09-18-2012, 03:32 PM   PM User | #5
coothead
Senior Coder

 
coothead's Avatar
 
Join Date: Jan 2004
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 1,551
Thanks: 0
Thanked 195 Times in 191 Posts
coothead will become famous soon enough
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..
coothead is offline   Reply With Quote
Old 09-20-2012, 12:35 PM   PM User | #6
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
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?
kishue is offline   Reply With Quote
Old 09-20-2012, 03:36 PM   PM User | #7
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
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>
kishue is offline   Reply With Quote
Old 09-21-2012, 09:17 AM   PM User | #8
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
Rdspoons you've been the only person to come close to the outcome i need without saying PHP, can you help?
kishue is offline   Reply With Quote
Old 09-21-2012, 04:09 PM   PM User | #9
LearningCoder
Regular Coder

 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: The Pleiades
Posts: 849
Thanks: 67
Thanked 28 Times in 28 Posts
LearningCoder is an unknown quantity at this point
coothead's example is probably the best imo just because it's done with php. Don't rely on JS.

Regards,

LC.
LearningCoder is offline   Reply With Quote
Old 09-25-2012, 11:50 AM   PM User | #10
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
Any way the problem can be fixed?
kishue is offline   Reply With Quote
Old 09-25-2012, 02:45 PM   PM User | #11
LearningCoder
Regular Coder

 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: The Pleiades
Posts: 849
Thanks: 67
Thanked 28 Times in 28 Posts
LearningCoder is an unknown quantity at this point
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.
LearningCoder is offline   Reply With Quote
Old 09-28-2012, 04:09 PM   PM User | #12
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
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.
kishue is offline   Reply With Quote
Old 09-28-2012, 05:44 PM   PM User | #13
LearningCoder
Regular Coder

 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: The Pleiades
Posts: 849
Thanks: 67
Thanked 28 Times in 28 Posts
LearningCoder is an unknown quantity at this point
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..
LearningCoder is offline   Reply With Quote
Old 09-28-2012, 07:40 PM   PM User | #14
coothead
Senior Coder

 
coothead's Avatar
 
Join Date: Jan 2004
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 1,551
Thanks: 0
Thanked 195 Times in 191 Posts
coothead will become famous soon enough
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
coothead is offline   Reply With Quote
Users who have thanked coothead for this post:
kishue (10-09-2012)
Old 10-09-2012, 09:24 AM   PM User | #15
kishue
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kishue is an unknown quantity at this point
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!!!!
kishue is offline   Reply With Quote
Reply
Page 1 of 2 1 2

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 04:56 PM.
Advertisement
Log in to turn off these ads.