Professional Web Applications Themes

World Map with info - Coldfusion - Advanced Techniques

Hello Gang .. I'm off on a tricky task and I wanting to hear everyone's opinion on it .. I need to provide an image with the world map, pointing certain citie names on some countries. These cities will need to activate a menu drop down of some sort giving several choices, the choices are store names within that country .. I have an image of the world map .. I just need to figure out the best way to get the drop downs off each city .. Do I use javascript, flash .. I'm not sure of the most ...

  1. #1

    Default World Map with info

    Hello Gang ..
    I'm off on a tricky task and I wanting to hear everyone's opinion on it ..

    I need to provide an image with the world map, pointing certain citie names on
    some countries.
    These cities will need to activate a menu drop down of some sort giving
    several choices, the choices are store names within that country ..
    I have an image of the world map .. I just need to figure out the best way to
    get the drop downs off each city ..

    Do I use javascript, flash .. I'm not sure of the most effective way to handle
    this situation ..

    Any ideas will help ..

    Cheeers
    Pagin

    atahualpa Guest

  2. #2

    Default Re: World Map with info

    I'd start with the google-earth API or google-maps API and work from there.

    MikerRoo Guest

  3. #3

    Default Re: World Map with info

    This is a relatively simple solution using CSS, JavaScript and the html <map>
    tag.





    <script language="JavaScript">
    function storeList(city) {
    var obj = eval("formName.lst_" + city);
    if (obj.style.display == "none") // show
    obj.style.display = "";
    else
    obj.style.display = "none"; // hide
    }
    </script>

    <style>
    #img_worldMap { position:absolute; left:0px; top:0px; }
    #lst_London { position:absolute; left:130px; top:220px; }
    #lst_NewYork { position:absolute; left:90px; top:300px; }
    </style>

    <form name="formName">
    <select id="lst_London" style="display:none;">
    <option value="1">Store 1</option>
    <option value="2">Store 2</option>
    <option value="3">Store 3</option>
    </select>
    <select id="lst_NewYork" style="display:none;">
    <option value="1">Store 1</option>
    <option value="2">Store 2</option>
    <option value="3">Store 3</option>
    </select>
    </form>

    <img id="img_worldMap" src="world_map.gif" width="800" height="600"
    usemap="#worldmap">

    <map name="worldmap">
    <area shape="rect" coords="110,220,130,240"
    href="javascript:storeList('London')">
    <area shape="rect" coords="70,300,90,320"
    href="javascript:storeList('NewYork')">
    </map>

    efecto747 Guest

  4. #4

    Default Re: World Map with info

    Thanks efecto747 .. this works great ..

    I was wondering .. how would I go about replacing the drop down menu with a
    dhtml drop down menu instead ..
    it appears that the business owners want the user to experience the following:
    1. User clicks on the city name (London) on the map
    2. Have the click action open a list of store names (2 to 10 choices) as a
    Dhtml menu
    3. Have the user select a store name and on the mouse over action have it
    generate another layer of menu containing the store address, etc.

    I've made the Dhtml menu before, but nothing like what I'm working on right
    now ..
    Any ideas or suggestions will be appreciated ..

    Pagino

    atahualpa Guest

  5. #5

    Default Re: World Map with info

    It shouldn't be too hard - you'd need to replace the <select> tags with perhaps
    <div> tags - so instead of:

    <select id="lst_London" style="display:none;">
    <option value="1">Store 1</option>
    <option value="2">Store 2</option>
    <option value="3">Store 3</option>
    </select>

    you'd have something like:

    <div id="lst_London" style="display:none;">
    <table>
    <tr id="m1r1" onmouseover="rowOn(this)" onmouseout="rowOff(this)"
    onclick="showStore(1)"><td>Store 1</td></tr>
    <tr id="m1r2" onmouseover="rowOn(this)" onmouseout="rowOff(this)"
    onclick="showStore(2)"><td>Store 2</td></tr>
    <tr id="m1r3" onmouseover="rowOn(this)" onmouseout="rowOff(this)"
    onclick="showStore(3)"><td>Store 3</td></tr>
    </table>
    </div>

    you'd need to add some functions to handle the row highlighting (rowOn and
    rowOff) and to handle the mouse click event (showStore) which is really outside
    the scope of this forum.

    The appearance of the menu (colour, lines, etc.) can be controlled through the
    style settings using the id to reference each menu.

    If you're looking to go down this path, your best bet would probably be to dig
    around some dhtml and JavaScript forums for some ideas on how you can build
    your menus and functions.

    hth - good luck.

    efecto747 Guest

Similar Threads

  1. info pallete not displaying any info
    By Buko@adobeforums.com in forum Adobe Photoshop Mac CS, CS2 & CS3
    Replies: 10
    Last Post: May 28th, 09:19 PM

Bookmarks

Posting Permissions

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139