Map Structure & Properties
HTML map object is combined up of 2 major parts:
- Map header, footer and global properties.
- Areas collection (the map object body)
In addition to the map itself an image is needed. After declaring a map, any image on the page can use it. Usually we would like to use the map with the specific image it was created for.
This is a sample to HTML map object, the header and footer colored in green and the areas collection (the map object body) colored in blue.
<MAP NAME="MyMap111">
<AREA SHAPE=RECT COORDS="1,73,61,178" HREF="http://www.walla.co.il" ALT="Walla (!)" OnClick="" OnMouseDown="" OnMouseUp="">
<AREA SHAPE=RECT COORDS="1,399,751,474" HREF="http://www.nana.co.il" ALT="" OnClick="" OnMouseDown="" OnMouseUp="">
<AREA SHAPE=CIRCLE COORDS="96,314,40" HREF="http://www.photopos.com" ALT="" OnClick="" OnMouseDown="" OnMouseUp="">
<AREA SHAPE=CIRCLE COORDS="376,209,104" HREF="http://" ALT="" OnClick="" OnMouseDown="" OnMouseUp="">
</MAP> |
After we created the map we can place it in webpage and use it with any image we like. This is a sample of a full page code using the map:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<IMG SRC="http://www.abc.com/img1.jpg" USEMAP="#MyMap111" ALT="" BORDER="0">
<MAP NAME="MyMap111">
<AREA SHAPE=RECT COORDS="1,73,61,178" HREF="http://www.walla.co.il" ALT="Walla (!)" OnClick="" OnMouseDown="" OnMouseUp="">
<AREA SHAPE=RECT COORDS="1,399,751,474" HREF="http://www.nana.co.il" ALT="" OnClick="" OnMouseDown="" OnMouseUp="">
<AREA SHAPE=CIRCLE COORDS="96,314,40" HREF="http://www.photopos.com" ALT="" OnClick="" OnMouseDown="" OnMouseUp="">
<AREA SHAPE=CIRCLE COORDS="376,209,104" HREF="http://" ALT="" OnClick="" OnMouseDown="" OnMouseUp="">
</MAP>
</body>
</html> |
The image that uses this map colored in pink.
Using the program (in addition to the map editor) you can view & edit the map (and map areas collection) properties.
- The mapped image, map header and map footer properties can be view and edited via the Map Properties section on the properties grid.
- The areas collection properties can be viewed and edited using the Shape Properties section on the properties grid (This section shows the selected shape and enables you to edit its properties)
|
