Solved: World Map to link to current city time?

Create Account

JavaScript

Questions

Followers

Top Experts

sabecs

World Map to link to current city time?

Hi,
I have a map of the world that I would like to display the current local time when a city is selected.

I would like the map to link to the following:
MOSCOW, RUSSIA - http://www.timeanddate.com/worldclock/fullscreen.html?n=166
BERLIN, GERMANY - http://www.timeanddate.com/worldclock/fullscreen.html?n=37
BEIJING, CHINA - http://www.timeanddate.com/worldclock/fullscreen.html?n=33

What is the best way to create a small popup or just have the time display when the mouse click or scrolls over a city?

Thanks in advance for your feedback.
world-map.jpg

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

ASKER CERTIFIED SOLUTION

Hagay Mandel🇮🇱

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

Proculopsis

Here's a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26781865.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

var city = [
  { id: 256, name: "Vancouver",   x: 59,  y: 146 },
  { id: 137, name: "Los Angeles", x: 81,  y: 199 },
  { id: 64,  name: "Chicago",     x: 122, y: 184 },
  { id: 250, name: "Toronto",     x: 130, y: 174 },
  { id: 179, name: "New York",    x: 141, y: 186 },
  { id: 233, name: "São Paulo",   x: 192, y: 285 },
  { id: 31,  name: "Barcelona",   x: 248, y: 185 },
  { id: 125, name: "Lagos",       x: 253, y: 243 },
  { id: 136, name: "London",      x: 253, y: 162 },
  { id: 195, name: "Paris",       x: 255, y: 172 },
  { id: 56,  name: "Cape Town",   x: 285, y: 307 },
  { id: 37,  name: "Berlin",      x: 290, y: 157 },
  { id: 166, name: "Moscow",      x: 370, y: 137 },
  { id: 28,  name: "Bangkok",     x: 404, y: 228 },
  { id: 236, name: "Singapore",   x: 414, y: 254 },
  { id: 102, name: "Hong Hong",   x: 415, y: 222 },
  { id: 196, name: "Perth",       x: 430, y: 299 },
  { id: 33,  name: "Beijing",     x: 433, y: 183 },
  { id: 145, name: "Phillipines", x: 438, y: 230 },
  { id: 248, name: "Tokyo",       x: 467, y: 197 },
  { id: 152, name: "Melbourne",   x: 474, y: 317 },
  { id: 240, name: "Sydney",      x: 483, y: 308 }
];

$( function() {

  var index = -1;
  while ( ++index != city.length ) {
    $("map[name=city]").append(
      $("<area/>").attr( { id: city[index].id, shape: "circle", coords: city[index].x + "," + city[index].y + ",7", title: city[index].name, href: "#" } )
    );
  }

  $("area").hover( eventHover, eventHover );

  $("area").click( function() {
    var id = $(this).attr( "id" );
    $("#time-display").attr( "src", "http://www.timeanddate.com/worldclock/fullscreen.html?n=" + id );
    return false;
  });

});

function eventHover( event ) {
  switch ( event.type ) {
    case "mouseenter":
      var id = $(this).attr( "id" );
      var title = $(this).attr( "title" );
      $("#details").text( title );
    break;
    case "mouseleave":
      $("#details").html( "&nbsp;" );
    break;
  }
}

</script>
</head>
<body>

<div id="details">&nbsp;</div>

<img id="world-map" src="http://filedb.experts-exchange.com/incoming/2011/01_w06/t402937/world-map.jpg" usemap="#city" />
<map name="city" />

<iframe id="time-display" width="550" height="360" />

</body>
</html>

Open in new window

sabecs

ASKER

Thanks Proculopsis for your comments, I prefer to have a small window popup or tooltip.

I have created an image map and code, see
https://www.experts-exchange.com/questions/26783203/Create-popup-window-or-tooltip-for-html-image-map-using-CSS-or-jquery.html

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

JavaScript

Questions

Followers

Top Experts

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.