/    Sign up×
Community /Pin to ProfileBookmark

How to put javascript as a background?

I am rather new to this. I found a javascript that would change an image each month. I want to place this script as a background image inside the table of a page.

Here’s the script I found:

<script language=javascript>
/*
Changing image or text each month of the year
Author: Narayan Chand Thakur
Source: [url]http://ncthakur.itgo.com/[/url]
This may be used freely as long as this message is intact.
*
/
<!–hide

nctDay= new Date();
var month = nctDay.getMonth()+1;

var numberofimages = 12;
images = new Array(numberofimages+1);
images[1] = “<img src=’yourimage.jpg’>”;
images[2] = “<img src=’yourimage02.jpg’>”;
images[3] = “<img src=’yourimage03.jpg’>”;
images[4] = “<img src=’yourimage04.jpg’>”;
images[5] = “<img src=’yourimage05.jpg’>”;
images[6] = “<img src=’yourimage06.jpg’>”;
images[7] = “<img src=’yourimage07.jpg’>”;
images[8] = “<img src=’yourimage08.jpg’>”;
images[9] = “<img src=’yourimage09.jpg’>”;
images[10] = “<img src=’yourimage10.jpg’>”;
images[11] = “<img src=’yourimage11.jpg’>”;
images[12] = “<img src=’yourimage12.jpg’>”;

document.write(images[month]);
//–>
</script>

And here’s the part of my website I would like to alter:

<TABLE width=”50″ height=”65″ cellpadding=”0″ cellspacing=”0″ background=”calendar_dec.bmp”>

<TBODY>
<TR>
<TD align=”center” valign=”bottom” height=”20″>
<a href=”http://www.meh.com/” alt=”NONE” target=”_blank” style=”text-decoration : none;”>

I want the image (the javascript) to go where the background=”” tab is. There is a clock script after that, that will show the date on the image.

Is this possible or am I deluding myself?

Thank you for taking the time to read this!

to post a comment
JavaScript

20 Comments(s)

Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Not with that script, not unless you're outputting your entire page via javascript. That uses the document.write() method which doesn't append an existing html doc., but writes a new one.
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — So would I have to change that part of the script, the document.write part or would I have to alter the whole thing?
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Which element exactly should have the background image changing?
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — <TABLE width="50" height="65" cellpadding="0" cellspacing="0" background="calendar_dec.bmp">

I was thinking of having the background image changing where it says background="calendar_dec.bmp">

I'm sorry. Is that what you meant?
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Replace document.write(images[month]); with

document.getElementsByTagName('table')[0].style.backgroundImage= 'url('+ images[month]+')';
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — I plugged it in but it does not seem to work.
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — The image does not show up at all. Should I put a string representing the script wher it says background="" under the TABLE tab, perhaps?
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Ok, then put this inside the table tag id="bg", then replace the last statement I gave you with this:

document.getElementById('bg').style.backgroundImage= 'url('+ images[month]+')';
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — document.getElementById('bg').style.backgroundImage= 'url('+ images[month]+')';

//-->

</script>

<TABLE width="50" height="65" cellpadding="0" cellspacing="0" id="bg">

This is what I changed it to. The background image still does not show up.
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — do you have this up somewhere? If not, please post the entire page code.
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — <html>

<head>

<title>Untitled Document</title>

<style>

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

a:link{font: Normal 8.5pt verdana; color:#000000}

a:visited{font: Normal 8.5pt verdana; color:#000000}

a:hover{font: Normal 8.5pt verdana; color:#c0c0c0}

-->

</style></head>

<body>

<script language=javascript>

/*

Changing image or text each month of the year

Author: Narayan Chand Thakur

Source: http://ncthakur.itgo.com/

This may be used freely as long as this message is intact.

*
/

<!--hide

nctDay= new Date();

var month = nctDay.getMonth()+1;

var numberofimages = 12;

images = new Array(numberofimages+1);

images[1] = "<img src='yourimage.jpg'>";

images[2] = "<img src='yourimage02.jpg'>";

images[3] = "<img src='yourimage03.jpg'>";

images[4] = "<img src='yourimage04.jpg'>";

images[5] = "<img src='yourimage05.jpg'>";

images[6] = "<img src='yourimage06.jpg'>";

images[7] = "<img src='yourimage07.jpg'>";

images[8] = "<img src='yourimage08.jpg'>";

images[9] = "<img src='yourimage09.jpg'>";

images[10] = "<img src='yourimage10.jpg'>";

images[11] = "<img src='yourimage11.jpg'>";

images[12] = "<img src='calendar_dec.bmp'>";

document.getElementById('bg').style.backgroundImage= 'url('+ images[month]+')';

//-->

</script>

<TABLE width="50" height="65" cellpadding="0" cellspacing="0" id="bg">

<TBODY>

<TR>

<TD align="center" valign="bottom" height="20">

<a href="http://www.meh.com/" alt="NONE" target="_blank" style="text-decoration : none;"><b>

<!-- Clock Part 1 - Holder for Display of Clock -->

<span id="tP">&nbsp;</span>

<!-- Clock Part 1 - Ends Here -->



<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->

<script type="text/javascript">

// Clock Script Generated By Maxx Blade's Clock v2.0d

// http://www.maxxblade.co.uk/clock

function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }

function lZ(x){ return (x>9)?x:'0'+x; }

function dT(){ document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }

var oT="(tS().getMonth()+1)+' '+'-'+' '+tS().getDate()";

if(!document.all){ window.onload=dT; }else{ dT(); }

</script>

<!-- Clock Part 2 - Ends Here -->

</b></A>

</TR>

</TBODY>

</TABLE>

</body>

</html>

Here's the entire thing. Thank you so much for taking the time to do this.
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — This might be a dumb question but you DO have images in the same folder named 'yourimage.jpg' and numbered like they are in the array?
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — No I don't but, seeing as it is the month of december and I have a picture for that in the same folder, I thought that was sufficient. Is it not?
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — No, not close to sufficient. We're taking the images loaded into that array and we're making them the background. That's why nothing's showing. There's nothing to show.
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — The thing is, when I took the script outside of the html doc and used it alone, the one image I had in there, did indeed show up.
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Hang on, I'll write one that works. This isn't a good script to begin with
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Ok, here



<html>

<head>

<title>Untitled Document</title>

<style>

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

a:link{font: Normal 8.5pt verdana; color:#000000}

a:visited{font: Normal 8.5pt verdana; color:#000000}

a:hover{font: Normal 8.5pt verdana; color:#c0c0c0}

-->

</style></head>

<body onload="bg()">

<script language=javascript>

/*

Changing image or text each month of the year

Author: Narayan Chand Thakur

Source: http://ncthakur.itgo.com/

This may be used freely as long as this message is intact.

*
/

<!--hide

function bg() {

nctDay= new Date();

var month = nctDay.getMonth()+1;

var numberofimages = 12;

images = new Array(numberofimages+1);

images[1] = "yourimage.jpg";

images[2] = "yourimage02.jpg";

images[3] = "yourimage03.jpg";

images[4] = "yourimage04.jpg";

images[5] = "yourimage05.jpg";

images[6] = "yourimage06.jpg";

images[7] = "yourimage07.jpg";

images[8] = "yourimage08.jpg";

images[9] = "yourimage09.jpg";

images[10] = "yourimage10.jpg";

images[11] = "yourimage11.jpg";

images[12] = "calendar_dec.bmp";

document.getElementById('bg').style.backgroundImage= 'url('+ images[month]+')';

}

//-->

</script>

<TABLE width="50" height="65" cellpadding="0" cellspacing="0" id="bg">

<TBODY>

<TR>

<TD align="center" valign="bottom" height="20">

<a href="http://www.meh.com/" alt="NONE" target="_blank" style="text-decoration : none;"><b>

<!-- Clock Part 1 - Holder for Display of Clock -->

<span id="tP">&nbsp;</span>

<!-- Clock Part 1 - Ends Here -->



<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->

<script type="text/javascript">

// Clock Script Generated By Maxx Blade's Clock v2.0d

// http://www.maxxblade.co.uk/clock

function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }

function lZ(x){ return (x>9)?x:'0'+x; }

function dT(){ document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }

var oT="(tS().getMonth()+1)+' '+'-'+' '+tS().getDate()";

if(!document.all){ window.onload=dT; }else{ dT(); }

</script>

<!-- Clock Part 2 - Ends Here -->

</b></A>

</TR>

</TBODY>

</TABLE>

</body>

</html>
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — Thank you so much! It works perfectly! Was it just the problem of the script not being a good one? Anyway, I am much obliged to your taking the time to help me with this. Thank you!
Copy linkTweet thisAlerts:
@JPnycDec 20.2005 — Well it's still not a good script but the problem was that I didn't look very closely at the array. This script was designed to write to a new html doc, not for what you're using it for. I just modified it for your purpose. Was quicker than writing once from scratch.
Copy linkTweet thisAlerts:
@dedwardsauthorDec 20.2005 — I wish I knew that much about scripts! Thank you!
×

Success!

Help @dedwards spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...