1 Replies - 733 Views - Last Post: 14 September 2012 - 04:41 AM

#1 risky14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 12-September 12

Interactive JavaScript Map (click and show info)

Posted 14 September 2012 - 04:22 AM

Hello handsome people

I want to create an interactive map whereby the user hovers over an area and it shows the name of the area along with a little info. Then if he were to click on the area it would show detailed info to the right of the map. For example the image is a birds eye view of the U.S then if the user were to hover over Arizona it would show "Arizona, Population: 20, Crime: 2%" Then he clicks on this area and in some space to the right of the whole image of the U.S it would show detailed info of the city.
Would pop-up boxes be better for this?

I tried using html but it only shows an image of the area. I don't want the image I want the text and Javascripts interactivity.
Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Interactive JavaScript Map (click and show info)

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Interactive JavaScript Map (click and show info)

Posted 14 September 2012 - 04:41 AM

Hey.

Javascript has mouseover and mouseout events that you can use to trigger the DOM changes necessary to do what you're asking about. However you'll need to know the basics about Javascript and it's even handling to do that. How much Javascript do you know?

View Postrisky14, on 14 September 2012 - 11:22 AM, said:

Would pop-up boxes be better for this?

No. Popup boxes are rarely ever a better solution to anything. They usually just get in the way and make applications frustrating to use. With Javascript you can manipulate the DOM into doing pretty much anything you need; to show any info you want to show without leaving the confines of the current page. You can even create "fake" popup windows within the same page, without actually opening a new window, by overlaying new elements on top of the current page and position them to cover the whole window. While still a bit frustrating for the user, they are less so than traditional popup windows.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1