Changing the Background of a Table Monthly

**AngelAndCo** · 02-09-2009 10:52 AM

I would like to ask if anyone knows of a JavaScript routine that will change the background of a table on a monthly basis.

I took a script that changes pictures on a monthly cycle and tried to adapt it to the table background. Unfortunately, I am not very good with javascript, despite my love for the scripting and the things it can do.

If anyone can help, it would definitely be appreciated.

Thanks!

**MrNobody** · 02-09-2009 06:12 PM

T'is very easy:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dynamic Table Background</title>
</head>

<body>
<table id="mytable" border="1" cellpadding="2" style="border-collapse:collapse">
  <tr>
    <th align="center">Su</th><th align="center">Mo</th><th align="center">Tu</th>
    <th align="center">We</th><th align="center">Th</th><th align="center">Fr</th>
	<th align="center">Sa</th></tr>
  <tr>
    <td align="center">&nbsp;</td><td align="center">&nbsp;</td><td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td><td align="center">&nbsp;</td><td align="center">1</td>
	<td align="center">2</td></tr>
  <tr>
    <td align="center">3</td><td align="center">4</td><td align="center">5</td>
	<td align="center">6</td><td align="center">7</td><td align="center">8</td>
	<td align="center">9</td></tr>
  <tr>
    <td align="center">10</td><td align="center">11</td><td align="center">12</td>
	<td align="center">13</td><td align="center">14</td><td align="center">15</td>
	<td align="center">16</td></tr>
  <tr>
    <td align="center">17</td><td align="center">18</td><td align="center">19</td>
	<td align="center">20</td><td align="center">21</td><td align="center">22</td>
	<td align="center">23</td></tr>
  <tr>
    <td align="center">24</td><td align="center">25</td><td align="center">26</td>
	<td align="center">27</td><td align="center">28</td><td align="center">29</td>
	<td align="center">30</td></tr>
  <tr>
    <td align="center">31</td><td align="center">&nbsp;</td><td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td><td align="center">&nbsp;</td><td align="center">&nbsp;</td>
	<td align="center">&nbsp;</td></tr>
</table>

<script type="text/javascript">
<!-- //
var bgrounds = new Array(
    "/images/january.jpg",
    "/images/february.jpg",
    "/images/march.jpg",
    "/images/april.jpg",
    "/images/may.jpg",
    "/images/june.jpg",
    "/images/july.jpg",
    "/images/august.jpg",
    "/images/september.jpg",
    "/images/october.jpg",
    "/images/november.jpg",
    "/images/december.jpg"
); // no comma after last item above
var url = bgrounds[(new Date()).getMonth()];
document.getElementById("mytable").style.backgroundImage = "url('"+url+"')";
// -->
</script>
</body>
</html>

**AngelAndCo** · 06-13-2012 10:51 AM

Thank you so much! You are a life saver!

Pamela A. Jackson,
President/CEO
Angel & Co. Enterprises, Inc.
Windsor Mill, MD USA

Thread: Changing the Background of a Table Monthly

Thread Tools

Display

Changing the Background of a Table Monthly

Changing Background ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions