change image according to world time zones?

Question

I want to make a banner in html in which images changes according to the day time i.e. i want to display one image between 7pm to 6am and other image during other time. After searching the wen i found out a website which does the same thing. In this the image changes according to the time of the system but i want to change the picture according to the world time zone. For eg. i wanted the image to change according to the timezone of say, Japan. Here is the JS code:

function pixTimeChange() {
  var t=new Date();
  var h = t.getHours();
  var r1="obanner1.jpg";
  var r2="poolside3.png";
  var el=document.getElementById('myimage');

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
  el.src = (h>=7 && h<16) ? r1 : r2;
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  pixTimeChange();
});

I've limited knowledge of Javascript and jQuery and need help in this making changes in this script. Sorry if this question is out of scope of SO.

Can you provide a fiddle please ? By the way your `pixTimeChange` function works properly. — ebilgin, Aug 06 '15 at 10:45
This code is working, right? you just need the condition to check the timezone? — Kishor Pawar, Aug 06 '15 at 10:46
Right, the code works just fine but i need timezone condition? — vikrantnegi, Aug 06 '15 at 10:47
Javascripts Date object give you a date on "Client"s timezome. — ebilgin, Aug 06 '15 at 10:48

score 0 · Answer 1 · edited May 23 '17 at 12:23

Check out this question for getting the timezone.

Then with JQuery you can set the src parameter for your image, like this:

if (userIsInJapan) {
  $("#YourImgID").attr("src", r1);
}else{
  $("#YourImgID").attr("src", r2);
}

EDIT:

I found some more details on how to check the timezone in this thread

I made this little example to show you how to use it

<script>

function calcTime(city, offset) {
    // create Date object for current location
    var d = new Date();

    // convert to msec
    // subtract local time zone offset
    // get UTC time in msec
    var utc = d.getTime() - (d.getTimezoneOffset() * 60000);

    // create new Date object for different city
    // using supplied offset
    var nd = new Date(utc + (3600000*offset));

    // return time as a string
    return "The local time for "+ city +" is "+ nd.toLocaleString();
}
// Refresh the timer every 250 milliseconds
setInterval(function(){
    $("#timeLabel").text(calcTime('Japan', '+6'));
}, 250)
</script>
<label id="timeLabel"></label>

I did that as an illustration, it would be a boolean condition (true or false). — Teun, Aug 06 '15 at 11:28

change image according to world time zones?

1 Answers1