|
Step By Step To Create A Map In Your Web Page
 map.gif : Paint Shop Pro
map.map : Map this
Cordinations : Notespad/map.map
Insert to a html File
TARGET: Map in a Frame File
map.gif : Paint Shop Pro
<![CDATA[
A graphic file or a map first (eg: amap.gif)
If you do not have one, you need to create one
Create a graphic file:
open a new file in the "PAINT SHOP PRO"
draw three square areas, such as area 1, area 2, and area 3
(if they are in same size, use copy feature
select the first square, copy, paste as new selection.)
]]>
Back to Top
map.map : Map this
<![CDATA[
"MAPTHIS" software (create a file: amap.map based on amap.gif)
(1) open the graphic file (amap.gif) to be mapped
File Menu/New/Let's go find this; <br>
(instead of using "open" in the file menu)
select the file (amap.gif) that you want to be mapped;
<2) define each area of the 3 areas in the graphic file by using the circle button one of 3 buttons on the top right corner define your map 3 button are: a. circle define rectangle area b. square define circle/oval area c. polyshape define polygon area, such as a map, etc.) (3) give url to each defined area (one.htm; two.htm; three.htm) double click the 1st defined area area 1 click arrow button which is beside the polygon button back to your selected area, right click mouse click "add area info" "add your url": "one.htm" (the file you want to link to this area 1) (4) save the file as "amap.map" file (amap.map), after defining each of those 3 areas, default URL: default.htm map file format: NCSA (normally chosen, or contact your ISP) ]]>
Back to Top
map.map : Notespad/map.map
<![CDATA[
Coordination for each of those 3 areas, by open "amap.map" in "NOTEPAD"
(1) open file "amap.map" in "NOTEPAD", you will get the following:
...
default default.htm
rect one.htm 11,14 160,164
rect two.htm 163,14 305,164
rect three.htm 309,14 453,164
]]>
Back to Top
Insert to a html File
<![CDATA[
"map.htm" : create a htm file, which can be added in any part of another
htm file where the map is wanted
eg:
<a HREF="amap.map">
<img SRC="grx/map.gif" USEMAP="#THEMAP" BORDER="0" ISMAP>
</a>
<map NAME="THEMAP">
<area SHAPE="rect" COORDS="11,14,160,164" HREF="one.htm">
<area SHAPE="rect" COORDS="163,14,305,164" HREF="two.htm">
<area SHAPE="rect" COORDS="309,14,453,164" HREF="three.htm">
</map>
]]>
Back to Top
TARGET: Map in a Frame File
<![CDATA[
"TARGET" is used when a map is insert to a frame file.
]]>
Back to Top
HTML Commands:
<![CDATA[
<a HREF="amap.map">
<img SRC="amap.gif" USEMAP="#map" BORDER="0" ISMAP>
</a>
<map NAME="map">
<area SHAPE="rect" COORDS="x,y,x,y" HREF="URL">
<area SHAPE="rect" COORDS="x,y,x,y" HREF="URL">
<area SHAPE="rect" COORDS="x,y,x,y" HREF="URL">
</map>
Explain for the above:
amap.map: created based on amap.gif by using "MAPTHIS"
amap.gif: mother of amap.map, created by paint shop pro : 3 square areas
#map & map: they can be any words, but should be identical
rect: 3 area map shapes: rect - rectanglar
cirl - circle/oval
poly - polygon
COORDS: coordinations obtained by opening "amap.map" in "NOTEPAD"
URL: your linked file name
]]>
Sample map file as follows:
<![CDATA[
<a HREF="map.map">
<img SRC="map.gif" USEMAP="#THEMAP" BORDER="0" ISMAP>
</a>
<map NAME="THEMAP">
<area SHAPE="rect" COORDS="1,2,77,24" HREF="area1.htm">
<area SHAPE="rect" COORDS="77,2,151,24" HREF="area2.htm">
<area SHAPE="rect" COORDS="153,2,226,23" HREF="area3.htm">
</map>
]]>
|
![[IMAGE]](grx/mzlouv.gif)
