Results 1 to 2 of 2

Thread: Clickable world map

  1. #1
    Join Date
    Nov 2007
    Thanked 0 Times in 0 Posts

    Default Clickable world map

    Hey guys,

    i am looking to implement a function of a world map as shown at the bottom of the following link

    Any help would be greatly appreciated



  2. #2
    Join Date
    Mar 2006
    Illinois, USA
    Thanked 690 Times in 678 Posts


    The effect on that page is a fairly basic rollover image.

    It uses regions to control the image changing. If you look at it carefully, it is not very accurate. There are 3 large rectangles separating 1/3s of the map.

    So you can use image maps and onmouseover() to change the image when you hit a certain zone, or if you are on no zones then change the image back to the plain map. And the image map hot spots are also links to the corresponding pages.

    It looks like that code involves something with a list (where each region is a list item <li>), but that's not very important-- you can just use image maps and it should be fine. You may be able to do it other ways, though.

    Any rollover script should work, but you will use a single image and many spots on that image, rather than having just one image per rollover image. So you will use image map hot spots instead of the image tag and they will all change the image's src.

    However, it is possible to achieve the same effect with three images (one for each zone) side-by-side, each with a standard rollover effect, IF they are purely rectangular and separate. (In the case of that map, Greenland would be a problem for that method).

    You can also do a more complex, more interactive approach with flash if you would like.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. The Following User Says Thank You to djr33 For This Useful Post:

    Foundas (10-03-2009)


Posting Permissions

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