Results 1 to 14 of 14

Thread: Rollover button produces large interactive map

  1. #1
    Join Date
    Mar 2008

    Rollover button produces large interactive map

    What I'd like to make is: a button, when rolled over, opens a world map over the page... each continent on the world map is a rollover, and that rollover reveals a list of company locations in that area.

    If anyone could direct me to a tutorial or some source files of that nature, I would be grateful. I'm pretty much a javascript beginner, though I know Actionscript very well.

  2. #2
    Join Date
    Dec 2002
    St. Louis, MO, USA
    I was just going to suggest that something of this nature would probably be better handled with Flash, instead of JavaScript. Not saying it can't be done in JavaScript; but I am not sure how.


  3. #3
    Join Date
    Mar 2008
    LOL don't I wish? I'm primarily a Flash guy, but Steve Jobs is scaring my company away from Flash, so I'm trying to adapt and use other technologies. Is jQuery maybe the way to go for something like this?

  4. #4
    Join Date
    Dec 2002
    St. Louis, MO, USA
    Y'know.. between Jobs and Gates, I am sometimes surprised that things work, at all. Both are stubborn and bull-headed, unwilling to compromise or co-operate.

    I'd guess that AJaX would be able to do something like that; that's what Google uses for their interactive maps.


  5. #5
    Join Date
    Mar 2008
    Maybe I can get some assistance if I approach this in steps.

    First step: When the user rolls over the button in the top-right, the world map opens across the whole page.

    How do I achieve this with CSS/javascript?

  6. #6
    Join Date
    Dec 2002
    St. Louis, MO, USA


    Have you tried looking at the Google API? I've never worked with it, myself, but I would guess that someone has already done something along the lines of what you are looking for.


  7. #7
    Join Date
    Mar 2008
    I have never looked at the Google API, or any API for that matter. Like I said, I'm a Flash guy, I can do this and sooooo much more in Flash, but the boss wants it in javascript.

    Is the Google API javascript? I don't really know what it is.

  8. #8
    Join Date
    Dec 2002
    St. Louis, MO, USA
    Google Map API is JavaScript, jQuery (I think) and AJaX; basically you are using a web service to develop a local application that is dynamic and rich, often has the look/feel of Flash but isn't, and is interactive.

    Found this on the web; it's not exactly what you're looking for, but it's close.


    Just an example of what you can do with an API.


  9. #9
    Join Date
    Mar 2008
    I think that using the API is more advanced than I need - I'm not going for a true-to-life world map, I just need to have continent-shaped coloured blocks that are rollovers.

  10. #10
    Join Date
    Dec 2002
    St. Louis, MO, USA
    Hmm.. well..

    .. you _could_ have a div that starts out height=0, width=0, absolute position, top=0, left=0, display=none. Insert the map into it and set image dimensions to 0% height and width. That image would need imagemaps for the rollovers, contained within the div, too. Then set up your rollover to trigger the div to 100% height and width, display='', z-index to MUCH higher than 1, and image to 100% height and width.

    One of the problems that I can see is the imagemap; since not all monitors are set to the same resolution, nor do they all have the same aspect ratio, you'd have to use JavaScript to both dynamically determine browser screen height and width -AND- dynamically generate the imagemap for the rollovers - not easy as I suspect that you'd have to use percentages to calculate the x,y co-ordinates, and that is kind of sloppy.

    Unless someone else can think of a more accurate way.


    I just re-read your original post. You did NOT say anything about over the WHOLE page.. just over the page. If height/width don't have to be 100%, it would be easier than I just explained.

  11. #11
    Join Date
    Mar 2008
    Thank you WolfShade, this will be very helpful to me to get started. I kind of had that concept in mind, but just a few sentences like that from you really helps to clarify it a bit for me!

    I'm just really new at this, and it's easy to feel lost.

  12. #12
    Join Date
    Dec 2002
    St. Louis, MO, USA
    From what I understand, AS is almost identical to JavaScript (and Perl; and PHP), so it should be relatively easy.


  13. #13
    Join Date
    Jan 2009
    Check out this interactive world map sample, which might be what you need:

    This is created using a map building software, and rollover can be added to each continent or by adding a pinpoint.

  14. #14
    Join Date
    Mar 2008
    Thanks a lot, tedscoffee! That looks like a pretty kickass map.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14050 seconds
  • Memory Usage 2,980KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (14)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (14)postbit
  • (14)postbit_onlinestatus
  • (14)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates