Home > Computers > Web Design
<< How to Make an Interactive Map
Step 6 - Now that you have added your empty anchor points to your interactive U.S. map page, it's time to start making your actual states link to these points. This is accomplished by adding what Dreamweaver calls "Hotspots" to images. This functionality in Dreamweaver allows you to create circles, rectangles or to draw freehand shapes (Polygons) on certain points of an image to specify links for these regions.
a) To locate the Hotspot tools you have to click once on your image inside Dreamweaver while in Design view. This will then open hotspot tools in the Properties panel. See the example below.
b) To start lets name our HTML image Map "usa" , and in case we ever decide to make things more dynamic, lets go ahead and add scripting ID info too. For this lets use something different like "usa_script" just so it's easy to spot the different areas in the HTML code.
The end result source will look like...
All you really need is the usemap="#usa" for this example but it's good to go ahead and add name and id as well for future development.
c) Now you can begin creating hot spots. Click on your image once again to bring up image properties inspector hot spot tools if they are no longer visible. Lets start with the state of Florida. Since Florida is not a circle or rectangular shape, click the polygon
and bring your cursor over Florida to begin marking points around the outer perimeter of the state.
See the example below.
What you are essentually creating are region coordinates that are automatically generated in the HTML code for you each time you click a point. If you look in source view just before the end </BODY> tag, you should see something similar to the following...
<map name="usa">
<area shape="poly" coords="352,251,354,233,345,219,335,204,309,202,290,203,291,212,306,214,315,212,324,217,329,229,334,239,342,247" href="#florida" alt="Florida">
</map>
d) With the image hotspot area still selected, type the link #florida and ALT attribute Florida inside the fields shown in the Properties inspector. The link with the "#" symbol corresponds to your empty anchor points below your United States map. When you finish, click a blank area in the document to change the Property inspector. That's it! You have created your first hotspot.
e) You may also want to add links to empty anchor points like [back to top]. Source view of the links looks like [<a href="#top">back to top</a>] and the associated empty anchor is placed at the very top of your html after the beginning <body> tag. It looks like <a name="top"></a>
Step 7 - Test your interactive map.
a) Save your HTML document and open it inside your browser. Click the State of Florida. It should now jump down to the Florida listings. Note that for the best results during testing and when you only have a few states showing in the results, it's recommended that you add some kind of artificial spacing at the bottom of your page like several <br /> tags below your results listings table. This is beccause if your page is too short it will not scroll beyond a certain point on the page. You need content for this to work. It may even require 20 or more <br /> tags. This will simulate the behavior of a fully populated locations listing. Simply remove the <br /> tags once you have added enough content.
For questions contact: info@monkeydoit.com
To obtain US & UK maps visit: HitGuru Interactive Maps
<< How to Make an Interactive Map
Make U.S.A. Map Hotspots for Your Interactive Map
<< How to Make an Interactive Map
a) To locate the Hotspot tools you have to click once on your image inside Dreamweaver while in Design view. This will then open hotspot tools in the Properties panel. See the example below.
b) To start lets name our HTML image Map "usa" , and in case we ever decide to make things more dynamic, lets go ahead and add scripting ID info too. For this lets use something different like "usa_script" just so it's easy to spot the different areas in the HTML code.
The end result source will look like...
All you really need is the usemap="#usa" for this example but it's good to go ahead and add name and id as well for future development.
c) Now you can begin creating hot spots. Click on your image once again to bring up image properties inspector hot spot tools if they are no longer visible. Lets start with the state of Florida. Since Florida is not a circle or rectangular shape, click the polygon
and bring your cursor over Florida to begin marking points around the outer perimeter of the state.
See the example below.This example shows the process of making a hotspot using the polygon tool. You always start at the perimeter and continue working your way around the outside as shown. You can probably do this in less than 13 points.  |
|
What you are essentually creating are region coordinates that are automatically generated in the HTML code for you each time you click a point. If you look in source view just before the end </BODY> tag, you should see something similar to the following...
<map name="usa">
<area shape="poly" coords="352,251,354,233,345,219,335,204,309,202,290,203,291,212,306,214,315,212,324,217,329,229,334,239,342,247" href="#florida" alt="Florida">
</map>
d) With the image hotspot area still selected, type the link #florida and ALT attribute Florida inside the fields shown in the Properties inspector. The link with the "#" symbol corresponds to your empty anchor points below your United States map. When you finish, click a blank area in the document to change the Property inspector. That's it! You have created your first hotspot.
Your interactive map should look similar to the example below. Click on Florida and you will be delivered to the Florida listing of service locations.
|
e) You may also want to add links to empty anchor points like [back to top]. Source view of the links looks like [<a href="#top">back to top</a>] and the associated empty anchor is placed at the very top of your html after the beginning <body> tag. It looks like <a name="top"></a>
Step 7 - Test your interactive map.
a) Save your HTML document and open it inside your browser. Click the State of Florida. It should now jump down to the Florida listings. Note that for the best results during testing and when you only have a few states showing in the results, it's recommended that you add some kind of artificial spacing at the bottom of your page like several <br /> tags below your results listings table. This is beccause if your page is too short it will not scroll beyond a certain point on the page. You need content for this to work. It may even require 20 or more <br /> tags. This will simulate the behavior of a fully populated locations listing. Simply remove the <br /> tags once you have added enough content.
For questions contact: info@monkeydoit.com
To obtain US & UK maps visit: HitGuru Interactive Maps
<< How to Make an Interactive Map