Image Maps

1
Image Maps

2
What is an Image Map

• Image Maps are graphics which have specific areas
  tagged to link to different locations.

3
Why use an ImageMap?

• Image Maps enable a design style that can be
  intuitive and artistically pleasing.

4
HOTSPOTS links
5
Why would I avoid an Image Map?

• Image Maps can be cryptic
• Image used may be large and slow to load
• Not all browsers support (but most do)
• Content is not as accessible for disabled
• Links to pages through Image Maps are not
  followed by some Search Bots

6
2 Types of Image Maps

• Server-Side Image Maps
• Program must run on Server
• Can be slow
• Client-Side Image Maps
• Supported by latest browsers
• Client-Side is most useful for us

7
FrontPage Imagemaps

• Server-side setup with Web bot and requires
  FrontPage Extensions
• FrontPage uses Client-Side and is as simple as
  pointing to areas on an image

8
Steps to produce Client-Side

• Begin with image, preferably with discrete areas
• Define areas to serve as link spots
• Determine coordinates of each area
• Define area (polygon type, vertices)
• Determine URLs for each link
• Create HTML using new Tags
• Usemap
• Map
• Area

9
USEMAP

• Option for IMG Tag
• USEMAP Option tells browser that the
  contains a clickable imagemap

10
Container

• Map Tag will define name definition
• coordinates and links
• (USEMAP refers to this mapname)

11
Tags

• Each clickable area is defined as either
• Shape (POLY, RECT, CIRCLE)
• Coordinates (x,y pairs)
• Link (any valid URL)
• hrefURL
• href"irregular.html"

In pixels
Each vertex
12
Sample

• href "irregular.html"
• 20,10"
• href "square.html"
• href"center-radius.html"

13
Creation Tools

• Your HTML editor should be selected to include
  imagemap creation capability
• ImageMap creation not provided in Navigator or
  Communicator Editor
• Tags may be added manually
• Some shareware editors provide capability
• MapThis is an example of simple shareware
• Microsoft FrontPage WYSIWYG