asked on

<img src> filename variable driven based on current date & time

Hi,

I am designing a weather site and have been given permission to use the map on

http://www.earthsci.unimelb.edu.au/~awatkins/bay.html

This is a gif image that is updated every 5 mins, so the file name changes too, ie bay1905061443.gif for 19/05/2006 14:43.

I found this
https://www.experts-exchange.com/questions/21408398/I-need-an-img-src-filename-to-be-variable-driven-based-on-current-date.html which gives me

<p align="left"><img id='myImage' src=''>
<script type="text/javascript">
var today = new Date()
var day = today.getDate()
var month = today.getMonth() + 1
var year = today.getYear()
vday = day.toString()
vmonth = month.toString()
vyear = year.toString()
if (vday.length == 1) {vday = '0' + vday}
if (vmonth.length == 1) {vmonth = '0' + vmonth}
document.write(vyear + vmonth + vday)
var vFileName="http://www.mydomain/" + vyear + vmonth + vday + ".gif"
document.getElementById('myImage').src = vFileName;

</script>
which is useful for setting the date, but there are two main differences I need.

Firstly, how do I format the date to be in ddmmyy format?

Secondly, how do I add the time, and only every 5 mins? ie the next image after the example above would be bay1905061448.gif

The final thing that needs to be in there is the image mapping... so far I have the following

<map name="home_nav">
<area alt="Point Wilson" shape="RECT" coords="40,100,130,180" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/wilson.html" title="Point Wilson Wind Graph">
<area alt="Fawkner Beacon" shape="RECT" coords="160,30,280,110" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/fbeacon.html" title="Fawkner Beacon Wind Graph">
<area alt="St Kilda Harbour RMYS" shape="RECT" coords="170,1,290,29" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/stk.html" title="St Kilda Harbour RMYS Wind Graph">
<area alt="Frankston Beach" shape="RECT" coords="220,125,340,194" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/frankston.html" title="Frankston Beach Wind Graph">
<area alt="Cerberus" shape="RECT" coords="270,215,330,297" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/cerberus.html" title="Cerberus Wind Graph">
<area alt="South Channel Is." shape="RECT" coords="135,195,235,265" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/schan.html" title="South Channel Is. Wind Graph">
<area alt="Bay and Ocean Temperature" shape="RECT" coords="5,245,134,287" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/temps.html" title="Sea Surface Temperatures Graph">
<area alt="Melbourne Air Temp Graph" shape="RECT" coords="5,288,145,315" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/melbtemp.html" title="Melbourne Air Temp Graph">
<area alt="Melbourne Sunrise Sunset Graph" shape="RECT" coords="1,1,120,38" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/sunset.html" title="Melbourne Sunrise Sunset Graph">
<area alt="RYCV (Williamstown) Tide Graph" shape="RECT" coords="1,39,120,75" href="http://www.earthsci.unimelb.edu.au/%7Eawatkins/rycv.wave.html" title="RYCV (Williamstown) Tide Graph">
</map>

<img usemap="#home_nav" src="" alt="Bay Winds" align="middle" border="0" height="316" width="346" img id='myImage' src=''>

<script type="text/javascript">
var today = new Date()
var day = today.getDate()
var month = today.getMonth() + 1
var year = today.getYear()
vday = day.toString()
vmonth = month.toString()
vyear = year.toString()
if (vday.length == 1) {vday = '0' + vday}
if (vmonth.length == 1) {vmonth = '0' + vmonth}
document.write(vyear + vmonth + vday)
var vFileName="http://www.earthsci.unimelb.edu.au/%7Eawatkins/bay" + vyear + vmonth + vday + ".gif"
document.getElementById('myImage').src = vFileName;

</script>

Sadly I am a graphics specialist, not a coding guru, so aren't too good with this stuff... any tips would be hugely appreciated.

Regards

The BFG

basicinstinct

Firstly, how do I format the date to be in ddmmyy format?

<p align="left"><img id='myImage' src=''>
            <script type="text/javascript">
              var today = new Date();
              var day = today.getDate();
              var month = today.getMonth() + 1;
              var year = today.getYear();
              vday = day.toString();
              vmonth = month.toString();
              vyear = year.toString();
              vyear = vyear.substring(vyear.length - 2);
              if (vday.length == 1) {vday = '0' + vday;}
              if (vmonth.length == 1) {vmonth = '0' + vmonth;}
              document.write(vday + vmonth + vyear);
              var vFileName="http://www.mydomain/" + vday + vmonth + vyear + ".gif";
              document.getElementById('myImage').src = vFileName;
             </script>

ASKER CERTIFIED SOLUTION

basicinstinct

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

basicinstinct

Of course, this is all client side stuff, so if userA loads the page at 14:30 he will refresh at 14:35 (and the image will be named accordingly). If userB loads the page at 14:31 the page will refresh at 14:36 (and the page will be named accordingly). Had you taken that into account? You posted client side code so I just worked off that.

basicinstinct

also, if the user's machine is set to the wrong date / time that will stuff it up too

basicinstinct

and timezones...

elysiandc

ASKER

Wow, top work basicinstinct! Amazing! You have a very good point about the timezones and dates. I hadn't really thought about those sorst of problems by having it run client side. Most users would be viewing from within the appropriate timezone, but I'd rather have a site that can be viewed from anywhere without errors.

I guess it could be done client side, but to much of a hastle to figure out, so I figure that leads to the next question...how to do it server side? Or, is there any way we can script it to ignore the numbers and just pull the file based on the word 'bay'? For server side, I'd be using PHP and MySQL, of which my knowledge is fairly basic at this stage.

We'd been looking at pulling the source image by trying to use the full filename, which has many potential problems. Stupidly I hadn't considered the flipside. Can we just tell it to source bay*.gif, where * is an unknown and ignored variable? There is only one file named bay{variable#}.gif in the source directory, so the script wouldn't encounter errors due to other .gif files with 'bay' in their names. This does away for the need to combine any date or time figures to create the desire filename. We just go for the constant instead.

Doing it server side, we can only assume that the server date and time are correct, and in the desired timezone. So there are potential problems that could occur there, but lets assume not for the sake of the exercise.
The script would need to take into account that the source image name changes every 5 minutes, so is updated at 03, 08, 13, 18, 23 etc. to 58 and then starts back to 03. That is the minutes, so there would be ddmmyyhh before that. Seems like a bit of an effort.

What do you think?

Much obliged,

The BFG

rrz

I don't if basicinstinct is around now or if he knows PHP, but maybe you ask your question at
https://www.experts-exchange.com/Web/Web_Languages/PHP/

elysiandc

ASKER

I have accepted the answer that basicinstinct gave above, as it does solve the initial problem that was proposed. I hhave had to rethink the apporach to the problem and have posted some other questions elsewhere. Any further comments or solutions to the queries above would still be greatly appreciated though. :D

basicinstinct

Hi - ok cool bananas.

I think this will be easy to program server side.

Perhaps it could be as easy as reloading the page every five minutes at precisely the right time. When the page reloads the server decides what the image source will be and bob's your uncle.

&lt;img src&gt; filename variable driven based on current date &amp; time

<img src> filename variable driven based on current date & time