1 Reply Latest reply on Mar 25, 2010 5:33 PM by Nancy OShea

    Create Mashup (display text on mouse over)of static US map using Javascript

    william0501562000

      I have a static bitmap of the US that I want to use in a mashup.  I have a javascript (floatie) that reads in the coordinates of a polygon and will display text when a user mouses over the polygon shape (state).  Never used DW before.  I have version CS-4.  I know that I have to trace the boundary lines of each state, which will generate a list of vector coordinates in the form of:   <area shape="poly" coords="94,25,178,46,164,111,65,81,62,35,92,26" >.  I have no idea how to do this.  I was told to use autotrace.  There is no autotrace function in CS-4.

       

      Can anyone point me in the right direction?

       

      Thanks for your help.

        • 1. Re: Create Mashup (display text on mouse over)of static US map using Javascript
          Nancy OShea Adobe Community Professional & MVP

          1) Bitmaps are not a suitable file type for the web.  You will need to open image in your favorite graphics editor, resize image to required height & width for web page, then Save for Web as an optimized GIF, JPG or PNG.   The smaller the filesize, the faster your page will load.

           

          2) In DW, Insert > Image.  On the Properties Panel you should see the HOTSPOT tools: Selection arrow, rectangle, elipse, polygon.

           

          3) Click the desired tool and drag your mouse around the area you wish to make an active link. I recommend zooming in on the page to make this easier to see.

           

          When you have linked all your hotspot regions on the image map, switch to Code View and add Title attributes (shown in red) to each area shape.

           

          <area shape="rect" coords="337,78,489,193" href="some-link.html" alt="#" title="Tooltip Text goes here"/>

           

          For more info on Image Maps and Hotspots, hit F1 (DW Help).

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful