Image Maps

1
Image Maps

• WWW131
• 131ImageMaps.ppt

2
What is an ImageMap?

• You already know how to create a set of
  individual images that are links.
• Image maps are more sophisticated imagery that
  enable the image to react to the position of the
  mouse within the image so that different parts of
  one image can each represent a different link.

3
Examples

• A home page contains a picture of a companys
  building.
• The user can click on different parts of the
  building image to obtain information about
  different departments housed in that building.

4
Example Defined Block Areas
5
Example - Image Map Button Bars
6
Example Physical Maps
7
Example Product Parts
Filter Link
Coffee Pot Link
Base Unit Link
8
Example Online Ordering
Bookends
How To Books
Reference Books
9
Example Book Analogy

• A home page contains a picture of a bookshelf.
• The user can click on each book to link to a
  different HTML file.

10
Two Types of ImageMaps

• Server-side
• The map file with coordinate info is housed on
  the server The server looks up the info and
  returns the URL to the browser.
• Client-side
• The map file containing coordinate info and links
  is part of the HTML file These run more quickly,
  but are not supported by older browsers.

11
Client-side Image Maps

• Image Maps are a nice feature, but they require a
  significant amount of labor to set up and code.
• Not all images are appropriate have obvious
  visual sections
• Since client-side image maps can be set up
  without special access to a server, we will code
  this type.

12
Attribute Required

• Identifies the image source

BORDER0
Sample
13
Attribute Required

• Must identify which map to use USEMAP
  Client maps
• USEMAP map_name

BORDER0USEMAPmap_name
Sample
14
Defining the MAP Code

• .......
• opening and closing tags
• All hotspots are nested within a MAP tag

• Defines each mouse-sensitive area (clickable
  area hotspot) and what to do if clicked on
• AREA - codes are place inside the opening and
  closing MAP tags
• 1 Area for each hotspot

15
MAP NAME Attribute

• .......

16
AREA Code Attributes

• HREFa.htm ALT Go to the first page

17
AREA Attributes

• HREF
• Describes the document to be displayed when the
  user clicks
• Relative or Absolute URL is supported
• SHAPE
• Describes the general shape of the hot spot
• 3 shapes circle, rectangle, polygon
• COORDS
• Describes the boundaries of the hot spot
• Each entry is an x, y coordinate pair
• ALT
• Alternative Text for browsers that dont support
  images

18
Coordinate Pairs (X, Y)

• Rectangle
• Requires 2 sets of coordinates
• x, y (pixel on graphic) for top left corner
• x, y (pixel on graphic) for bottom right corner
• Circle
• Requires coordinates for center and radius
• Polygon
• Requires coordinates for each vertex (point)

19
Coordinates for Rectangle Polygons
Rectangle Top, Left
Polygon 5 points
20
Coordinates for a Circle
Circle Center Point (388, 154)
Radius Calculate Center X axis (388,
154) Border Xaxis (459, 154) (459-388) 71
21
Sample Code

• 25,10,125,50
• SHAPErect COORDS 320,65,420,80

22
Procedure to Use an ImageMap

• 1. Decide on graphic to use for image map
• 2. Decide on .htm files to display when hot
  spots are clicked
• 3. Outline hot spots and find COORDS in program
  such as Photo Editor or Photoshop
• 4. Define ...
• 5. Include USEMAP attribute in IMG tag of
  original graphic

23
1. Image Selection

• Better to have visual indicators where to click

24
1. Selected Graphic (Sample)
25
2. Determine Files to Display

• Hnbch.htm
• Maui.htm
• Ftlaud.htm

26
Determining X, Y Coordinates

• Programs Photo Editor, PhotoShop, FrontPage

(0,0)
(15, 190)
(320, 174)
27
Determining X, Y Coordinates
(2, 164)
(124, 360)
28
4. Create the HTML Page

• Open Notepad
• Add the basic HTML tags
• Insert the image

Your name Lab
4-1 FACE"BAZOOKA" color"FF8429"SURF'S UP
LOCATIONS
29
4. Add the MAP Code

• Make sure to specify the shape, coords, href,
  and alt attributes

30
5. Modify the Image Tag

• Modify the tag to use the ImageMap
• Use the USEMAP attribute

31
Test the page!

• View the page in a browser
• Note the links are displayed in the status bar
• Test the links

32
Procedure Review

• 1. Decide on graphic to use for image map
• 2. Decide on .htm files to display when hot
  spots are clicked
• 3. Outline hot spots and find COORDS in program
  such as Photo Editor or Photoshop
• 4. Define ...
• 5. Include USEMAP attribute in IMG tag for
  original graphic
• 6. Test the page!

33
More Helpful Things

• True/False
• F
• T
• F
• F
• F
• T
• F
• F
• T
• F

• Multiple Choice
• a
• b
• d
• c
• b
• a
• c
• c
• b
• a

Keys to the End of Chapter Questions