|
July 1997
IEEE Web templates and image maps
Our IEEE staff -- Webmaster Reginald Hands and his crew -- have recently developed some Web page templates for IEEE volunteers and staff to use in creating or upgrading Web pages for IEEE sections, societies and so on.
IMAGE MAP. To code an image map, you use three tags: MAP, AREA and IMG. There are as many AREA tags as the number of distinct areas within the image map. The MAP tag is a pair of tags that enclose the AREA tags and also includes the name of the map so it can be referenced by the IMG tag later. The AREA tag defines two things; one of the distinct areas within the image map and the URL of the Web page that is the link associated with this area. The default shape for an area is SHAPE="RECT". This is the simplest and is used here, and other shapes such as circles and polygons can also be defined. The rectangular area is defined by a sequence of four numbers (of pixels) -- the top left X and Y coordinates, followed by the bottom right X and Y coordinates, where the zero for X is the left side and the zero for Y is the top of the image. The IMG tag defines the URL of the image map graphic file, the width and height in pixels (which should be consistent with the area definitions), the width of the border (or lack thereof), and the name of the image map (in the MAP tag). The image map coding for this example is shown as part (a) in the box of coding. 
For more information about creating image maps, you can check out Netscape's site at "http://home.netscape.com/assist/net_sites/html_extensions_3.html" or Maran Wilson's HTML Quick Reference V 1.2 at "http://sdcc8.ucsd.edu/~m1wilson/htmlref.html". TABLE MAP. If you want an alternative to using images, you can use the TABLE tags to create a similar capability (see box to the right). In part (b) of the coding box, I show the code to create a single-row, four-column table that is functionally equivalent to the bottom half of the image map. You can find the table tags described in Maran Wilson's page noted earlier. Most table tags require a closing tag. For example, the tag pair to delineate a row is <TR> </TR>, and the corresponding pair for each column (within a row) is <TD> </TD>. The opening <Table> tag can contain attributes, which in this example set the background color within the table, the relative width of the table, and various spacing descriptors. Be aware that, right now, Netscape's Navigator and Microsoft's Explorer browsers recognize a somewhat different set of tags. HYPERTEXT. A third alternative is to use a line of simple hypertext tags -- this is often done under an image map for users whose browsers do not support graphics or who have turned off the automatic loading of images in their browser -- perhaps to gain speed if their network or system is slow. You can see by comparing the coding in (b) and (c) that the only difference is the presence of the table tags in (b). TRADEOFFS. With the image map, you gain more control of the visual appearance because the viewer can change text font size, etc., by changing the browser settings. You can, using a graphics editor, produce a more compact, easier-to-read screen display image for presenting linking choices. The downside is the need for you to produce the graphic (depends on your level of skills and software) and for your intended viewers to be able to view images (depends on their level of Internet service). One basic choice in designing your Web site is whether you will use images at all, what size of images if you do, and whether you will develop and maintain "graphics" and "text only" versions. by Bob Alden |