PDA

View Full Version : Help Change image by the time of day



BennBenn
01-11-2011, 03:49 AM
I seen the how to instruction on the images change with the time of day
I'm just a beginner and don't understand much of nothing
can some one help to make this easy as possible for me?

it say:
"Now that you have the image, the next step is to copy the following script and attach it to the head section of your page.

// Time of Day Image Script
// copyright Stephen Chapman, 20th Jan 2005
// you may copy this script but please keep the copyright notice as well
function timeOfDayImage() {
var now = new Date;
var timeNow = now.getHours();
var img = null; var mess = '';
if #timeNow < 4 || timeNow > 20# {
img = 'time1#gif'; mess = 'night';
} else if #timeNow < 6# {
img = 'time2#gif'; mess = 'dawn';
} else if #timeNow < 8# {
img = 'time3#gif'; mess = 'early morning';
} else if #timeNow < 11# {
img = 'time4#gif'; mess = 'morning';
} else if #timeNow < 13# {
img = 'time5#gif'; mess = 'noon';
} else if #timeNow < 16# {
img = 'time6#gif'; mess = 'afternoon';
} else if #timeNow < 18# {
img = 'time7#gif'; mess = 'late afternoon';
} else {
img = 'time8#gif'; mess = 'sunset';
}
document#write('<img src="graphics\/'+img+'" width="200" height="80" alt="'+mess+'"
title="'+mess+'" />');
}

Then say:
"Once you have copied the code you just save it to an external javascript file. I called mine tod.js. You then link it into the head of your page using the following code:"

<script type="text/javascript" src="tod.js">
</script>

My first question is: If i copy the first code, how do I attach it in to Head ?
then it say in the baton - something about an External file and to link it to the second code,
How to do this?

If you like to see the whole thing
I got this script from this page:
http://javascript.about.com/library/bltod3.htm (http://javascript.about.com/library/bltod3.htm)

Can some one make this as Easy as possible for me.
I'm a rooky, if some one can make it an Easy Step by Step
or put it together for me to just copy it and paste it on the the page.

PS. Please excuse my English.

Collectors-info
01-11-2011, 06:39 PM
Couldn't get that one to work for some reason? But the one below might be more simple.
Cut & paste the script into notepad & Just change the image url's to your own & also the times (marked in red). Also add your images to the page using the BV file uploaded as they will then stay in the same directory. Then just cut & paste the script from notepad to a html box on your BV page.
-----------------------------------------------------------------------



<a href="javascript:SurferHandler()">
<script>

//Time of day message script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var Digital=new Date()
var hours=Digital.getHours()

//Configure message below to your own.
if (hours>=6&&hours<=9)
document.write('<img src="time2.gif" border=0>')
else if (hours>=9&&hours<=11)
document.write('<img src="time4.gif" border=0>')
else if (hours>=11&&hours<=13)
document.write('<img src="time5.gif" border=0>')
else if (hours>=13&&hours<=15)
document.write('<img src="time6.gif" border=0>')
else if (hours>=15&&hours<=18)
document.write('<img src="time6.gif" border=0>')
else if (hours>=18&&hours<=20)
document.write('<img src="time7.gif" border=0>')
else if (hours>=20&&hours<=22)
document.write('<img src="time1.gif" border=0>')
else if (hours>=22&&hours<=1)
document.write('<img src="time1.gif" border=0>')
else if (hours>=1&&hours<=5)
document.write('<img src="time1.gif" border=0>')

</script></a>

BennBenn
01-11-2011, 11:23 PM
Sorry.
but i see two parts in red
I'm realy not to good on this
can you explain the first part how to set it?

//Configure message below to your own.
if (hours>=6&&hours<=9)

How to configuer this part?
i see the 6 and the 9, but have no idea hot to set it
Thanks

BennBenn
01-12-2011, 02:00 AM
Well i look and look, Finally found a script less complicated and it's just a copy and paste
I replace the original images with my images and it work perfect.
but as you can see, I'm very so don't know much about anything

The script is as fallow


<script>
<!--
/*By George Chiang (JK's JavaScript tutorial)
http://www.javascriptkit.com (http://www.javascriptkit.com/)
Credit must stay intact for use*/
var current= new Date()
var day_night=current.getHours()
if (day_night<=12)
document.write("<img src='img1.gif'>")
else
document.write("<img src='img2.gif'>")
//-->
</script>

The help i need is to add more time to it.
I have 3 images and I'll like to set it this way
From 5am to 7am to show images 1
From 7am to 5pm to show images 2
From 5pm to 7pm to show images 1
From 7pm to 5am to show images 3

Can some one help PLEASE

BennBenn
01-12-2011, 02:10 AM
Couldn't get that one to work for some reason? But the one below might be more simple.
Cut & paste the script into notepad & Just change the image url's to your own & also the times (marked in red). Also add your images to the page using the BV file uploaded as they will then stay in the same directory. Then just cut & paste the script from notepad to a html box on your BV page.
-----------------------------------------------------------------------



<a href="javascript:SurferHandler()">
<script>

//Time of day message script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var Digital=new Date()
var hours=Digital.getHours()

//Configure message below to your own.
if (hours>=6&&hours<=9)
document.write('<img src="time2.gif" border=0>')
else if (hours>=9&&hours<=11)
document.write('<img src="time4.gif" border=0>')
else if (hours>=11&&hours<=13)
document.write('<img src="time5.gif" border=0>')
else if (hours>=13&&hours<=15)
document.write('<img src="time6.gif" border=0>')
else if (hours>=15&&hours<=18)
document.write('<img src="time6.gif" border=0>')
else if (hours>=18&&hours<=20)
document.write('<img src="time7.gif" border=0>')
else if (hours>=20&&hours<=22)
document.write('<img src="time1.gif" border=0>')
else if (hours>=22&&hours<=1)
document.write('<img src="time1.gif" border=0>')
else if (hours>=1&&hours<=5)
document.write('<img src="time1.gif" border=0>')

</script></a>



Sorry.
but i see two parts in red
I'm realy not to good on this
can you explain the first part how to set it?

//Configure message below to your own.
if (hours>=6&&hours<=9)

How to configuer this part?
i see the 6 and the 9, but have no idea how to set it
or what in meen
Thanks

Collectors-info
01-12-2011, 07:02 AM
The 6 & 9 means from 6am to 9 am that image will be displayed.
You might prefer to enter a different time setting or just leave as it is.
As you look down the script the are more time changes.

BennBenn
01-12-2011, 04:53 PM
Thanks Very much, I'll try it an let you know

What about the other one that i put below?

Collectors-info
01-12-2011, 10:00 PM
Its just a day & night script.

BennBenn
01-12-2011, 10:13 PM
The 6 & 9 means from 6am to 9 am that image will be displayed.
You might prefer to enter a different time setting or just leave as it is.
As you look down the script the are more time changes.

----------------------------------------------------------------------

Thanks a lot - it was helpful and it's working
the only change i made was, removing the extra cuotation it hade
you hade it set:
("<img src="img1.jpg" border=0>")
now it look like this
("<img src='img1.jpg' border=0>")

The complete code look like this now
and it's perfect - Thank u much Collectors-Info


<a href="javascript:SurferHandler()">
<script>
//Time of day message script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com (http://javascriptkit.com)) for script
//Credit must stay intact for use
var Digital=new Date()
var hours=Digital.getHours()
//Configure message below to your own.
if (hours>=5&&hours<=7)
document.write("<img src='img2.jpg' border=0>")
else if (hours>=7&&hours<=17)
document.write("<img src='img1.jpg' border=0>")
else if (hours>=17&&hours<=19)
document.write("<img src='img2.jpg' border=0>")
else if (hours>=19&&hours<=5)
document.write("<img src='img3.jpg' border=0>")
</script></a>

My page is Spanish
http://AtlantaHispano.NET

Excuse my english.

BennBenn
01-20-2011, 10:58 PM
Here is the Script i Used, here it is
for if any one will like a easy Script
just copy paste and fix the time - -
Thanks: Collector-Info


<a href="javascript:SurferHandler()">
<script>
//Time of day message script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com (http://javascriptkit.com/)) for script
//Credit must stay intact for use
var current=new Date()
var hours=current.getHours()
//Configure message below to your own.
if (hours>=3&&hours<=4)
document.write("<img src='ATL-BG-IMG1.jpg' border=0>")
else if (hours>=4&&hours<=5)
document.write("<img src='ATL-BG-IMG2.jpg' border=0>")
else if (hours>=5&&hours<=8)
document.write("<img src='ATL-BG-IMG3.jpg' border=0>")
else if (hours>=8&&hours<=15)
document.write("<img src='ATL-BG-IMG4.jpg' border=0>")
else if (hours>=15&&hours<=17)
document.write("<img src='ATL-BG-IMG3.jpg' border=0>")
else if (hours>=17&&hours<=18)
document.write("<img src='ATL-BG-IMG2.jpg' border=0>")
else if (hours>=18&&hours<=19)
document.write("<img src='ATL-BG-IMG1.jpg' border=0>")
else if (hours>=19&&hours<=20)
document.write("<img src='ATL-BG-IMG5.jpg' border=0>")
else if (hours>=20&&hours<=24)
document.write("<img src='ATL-BG-IMG6.jpg' border=0>")
else if (hours>=0&&hours<=1)
document.write("<img src='ATL-BG-IMG6.jpg' border=0>")
else if (hours>=1&&hours<=3)
document.write("<img src='ATL-BG-IMG6.jpg' border=0>")
</script></a>