Forum Moderators: open
script works fine i can place it any were in a html page ...
problem is i want to change the background image of a table in my htmlpage .. and i can not put this script were normaly the background.gif goes for a <table background= as it gives errors.
do some one know how i can edit this script so i can have the image changed in the background of a table
<SCRIPT LANGUAGE=JavaScript><!-- Begin
document.write("<font color=blue size=+1>")
day = new Date()
hr = day.getHours()
if ((hr == 1) ¦¦ (hr == 2) ¦¦ (hr == 3) ¦¦ (hr == 4) ¦¦ (hr == 5) ¦¦ (hr == 6) ¦¦ (hr == 7) ¦¦ (hr == 8) ¦¦ (hr == 9) ¦¦ (hr == 10) ¦¦ (hr == 11))
document.write("<IMG SRC=goodmweltxt.gif>")
if ((hr == 12) ¦¦ (hr == 13) ¦¦ (hr == 14) ¦¦ (hr == 15) ¦¦ (hr == 16) ¦¦ (hr == 17))
document.write("<IMG SRC=gooddweltxt.gif>")
if ((hr == 18) ¦¦ (hr == 19) ¦¦ (hr == 20) ¦¦ (hr == 21))
document.write("<IMG SRC=goodeweltxt.gif>")
if ((hr == 22) ¦¦ (hr == 23) ¦¦ (hr == 0))
document.write("<IMG SRC=goodnweltxt.gif>")
document.write("</font>")
// End --></SCRIPT>
i look forward to reply
You can change the background image in almost any element once the page is loaded. For instance, here is the stripped down code.
THIS GOES IN BETWEEN <head> ... </head>
<script type="text/javascript">
function pageLoaded()
{
day = new Date()
hr = day.getHours()
if ((hr == 1) ¦¦ (hr == 2) ¦¦ (hr == 3) ¦¦ (hr == 4) ¦¦ (hr == 5) ¦¦ (hr == 6) ¦¦ (hr == 7) ¦¦ (hr == 8) ¦¦ (hr == 9) ¦¦ (hr == 10) ¦¦ (hr == 11))
getElementById("tableToAlter").style.background-image = "url('goodmweltxt.gif')"
if ((hr == 12) ¦¦ (hr == 13) ¦¦ (hr == 14) ¦¦ (hr == 15) ¦¦ (hr == 16) ¦¦ (hr == 17))
getElementById("tableToAlter").style.background-image = "url('gooddweltxt.gif')"
if ((hr == 18) ¦¦ (hr == 19) ¦¦ (hr == 20) ¦¦ (hr == 21))
getElementById("tableToAlter").style.background-image = "url('goodeweltxt.gif')"
if ((hr == 22) ¦¦ (hr == 23) ¦¦ (hr == 0))
getElementById("tableToAlter").style.background-image = "url('goodnweltxt.gif')"
}
</script>
In the body tag:
<body onload="pageDone();">
In your table html
<table id="tableToAlter"> ...
Explanation:
The body tag has an attribute "onload". onload executes whenever the page is done loading. The function it executes is "pageLoaded()".
The table tag has an attribute "id". In the pageLoaded routine, the function "getElementById()" will return the object with the id you specify... in this case, the table you want to alter.
Once you have it, you can set its style property "background-image" to whatever you want.
If you are having any difficulties understanding this, I would look up more information on CSS (for the style work I used) and also do a search on "DOM DHTML" for more information on the use of id's and getElementById's.
is it compatable with all bowsers?
i want javascript or dhtml as if i use perl it wil show server time not time of visitors computer
thanks pal
i'm missing something... you say that pageloaded() is executed but you show pagedone() in the body tag... hunh?
Thats really strange, because I have an explicit memory of changing everyone to pageLoaded().
Oh well you know what I meant!
Every function reference should be pageLoaded() :)
If the browser supports DOM, then it should work.. As far as I know, that would be IE 5+, Mozilla 1.1+ (and any variant of), Netscape 6.0+, and Opera, as far as major browsers go..
<font color=blue size=+1>
<script type="text/javascript">
<!-- Begin
day = new Date();
hr = day.getHours();
if (1 <= hr && hr <= 11)
image_to_show = "goodmweltxt.gif>";
else if (12 <= hr && hr <= 17)
image_to_show = "gooddweltxt.gif>";
else if (18 <= hr && hr <= 21)
image_to_show = "goodeweltxt.gif>";
else if (22 <= hr && hr <= 23 ¦¦ hr == 0)
image_to_show = "goodnweltxt.gif>";
document.write("<table background='" + image_to_show + "'>");
// End -->
</script>
<noscript><table></noscript>
<tr><td> etc </td></tr>
</table>
</font>
(and I hope I haven't made any typos either ;)
Shawn
i'm using Apache 1.3.27 on OS/2 (aka apache/2) and mozilla 1.4 on windows... for the main test, i do not see a background in the table... only the TD text...
http*//test.wpusa.dynip.com/
the refresh is turned off and the table is at the bottom... it currectly contains several "etc" lines...
i'm lost ATM ;(
I know I shouldn't have looked at your page on principle (because posting urls are against the terms of use, even if the url is not a hotlink)... But I did anyway.... You have a lot of basic html errors, so I think the first thing you should do is validate your html at the w3c validator site. That might eliminate some of yourerrors.
The next thing to look at is that you are calling the function twice: once inside the html and once from the onload() event. The one from the onload event will try to totally over-write your html page, hence generates errors, so get rid of it.
Shawn
yeah, i should have known better and cleaned it up... like i said, i was trying several variants... i was finally able to get the one you posted to work as desired... one thing that i had forgotten about was that the ¦ characters have to be replaced... as for the html errors, that was something that i threw together by hand... most of my pages are much better than that... that's why its on the test site :wink:
i'd still like to see sethcall's work as desired... however, it would probably take a UA sniffer for truely proper operation...
yes, i'd tried it both ways, with "text/" and without... i dunno why but i have seen problems in some cases with it... so in my working with, i'd try it one way and then add or remove that and try it again... at one time, one of the errors i'd get with "text/" was that the browser would try to download the script instead of executing it... i forget the other specifics, though...
i aldo had some idea about that getElementBy but wasn't sure where to go... been wandering about in moz's DOM inspector but hadn't hit upon the majik yet...
FWIW: yeah, i'm flying blind with a lot of this... i'm selftaught with 25+ years in the industry... best way to learn something is to get right in there in the deep end and sink or swim :grin: i do try to take the time to locate some documentation but that generally comes after i get frustrated... i wasn't frustrated last night... just too tired to even really be messing with it... i shouldn't even be up messing with it now... i'm going back to bed for another hour or two (at least) :wink:
[edited by: wkitty42 at 10:05 am (utc) on July 15, 2003]
The correct syntax is type="text/javascript". That is a mandatary attribute, and I'd suggest that if you experienced problems with it in the past, the error was elsewhere.
In addition, you can have language="JavaScript", but that is deprecated, and should not be used.
But definitely don't muddle them up. language="text/javascript" and type="JavaScript" are definite no-no's
I agree. I have not found a decent, easy to understand reference for the DOM. Try [w3.org...] and [mozilla.org...]
Shawn
anyway, also had to change background-image to backgroundImage...
<script type="text/javascript">function pageLoaded()
{
day = new Date()
hr = day.getHours()
if ((hr == 1) ¦¦ (hr == 2) ¦¦ (hr == 3) ¦¦ (hr == 4) ¦¦ (hr == 5) ¦¦ (hr == 6) ¦¦ (hr == 7) ¦¦ (hr == 8) ¦¦ (hr == 9) ¦¦ (hr == 10) ¦¦ (hr == 11))
document.getElementById("tableToAlter").style.backgroundImage = "url('goodmweltxt.gif')"
if ((hr == 12) ¦¦ (hr == 13) ¦¦ (hr == 14) ¦¦ (hr == 15) ¦¦ (hr == 16) ¦¦ (hr == 17))
document.getElementById("tableToAlter").style.backgroundImage = "url('gooddweltxt.gif')"
if ((hr == 18) ¦¦ (hr == 19) ¦¦ (hr == 20) ¦¦ (hr == 21))
document.getElementById("tableToAlter").style.backgroundImage = "url('goodeweltxt.gif')"
if ((hr == 22) ¦¦ (hr == 23) ¦¦ (hr == 0))
document.getElementById("tableToAlter").style.backgroundImage = "url('goodnweltxt.gif')"
}
</script>
and i found another way by using setAttribute instead of style.backgroundImage...
<script type="text/javascript">function pageLoaded()
{
day = new Date()
hr = day.getHours()
if ((hr == 1) ¦¦ (hr == 2) ¦¦ (hr == 3) ¦¦ (hr == 4) ¦¦ (hr == 5) ¦¦ (hr == 6) ¦¦ (hr == 7) ¦¦ (hr == 8) ¦¦ (hr == 9) ¦¦ (hr == 10) ¦¦ (hr == 11))
document.getElementById("tableToAlter").setAttribute("background", "goodmweltxt.gif");
if ((hr == 12) ¦¦ (hr == 13) ¦¦ (hr == 14) ¦¦ (hr == 15) ¦¦ (hr == 16) ¦¦ (hr == 17))
document.getElementById("tableToAlter").setAttribute("background", "gooddweltxt.gif");
if ((hr == 18) ¦¦ (hr == 19) ¦¦ (hr == 20) ¦¦ (hr == 21))
document.getElementById("tableToAlter").setAttribute("background", "goodeweltxt.gif");
if ((hr == 22) ¦¦ (hr == 23) ¦¦ (hr == 0))
document.getElementById("tableToAlter").setAttribute("background", "goodnweltxt.gif");
}
</script>
seems to work pretty well... i might even be able to work this into something that i was going to do that showed different page backgrounds... an idea i had from something i saw on a Sony VAIO some time back... dunno that i can work it into the base color theme of my main site, though... right now, its more of a "hey! that's neat..." type thing...
[yeah yeah yeah... i know... i haven't made it back to bed (yet!)]
I always mke that mistake initially.
dang css - to -javascript naming conventions ;)
