Imagemaps

1
Imagemaps

• Norman White
• Stern School of Business

2
Overview

• Imagemaps allow users to select where they want
  to go based on clicking on different parts of a
  picture.
• Imagemaps provide a simple to use, easy to
  develop user interface which provides the user
  with direct feedback

3
Example(s)

• Image of United States, click on state to get
  more info
• Image of a manufacturing assembly, click on each
  part to find out more info
• Can be used anyplace an image can contain areas
  which have different meanings
• Need to identify different portions of the image
  and associate each with a link to another page.

4
Imagemaps

• Imagemap is just a CGI program that is sent the
  coordinates that a user has clicked on
• Imagemap program has a small database that allows
  one to specify what URL to go to depending on
  what user clicks on. Areas can be described as
  circles, polygons, rectangles or default (for
  everywhere else)
• Mapedit- Program used to generate imagemaps

5
Homework Assignment

• Add an imagemap to your homepage that points to
  the Stern Home Page, or your home page.
• Http//www.stern.nyu.edu/userid
• How do we do it?
• Need to be able to make an image (try
  paintbrush, lview, paintshop etc.)
• Need an html file to reference the image and
  include the map statements
• Need to know how to code map statements

6
Imagemap Details

• Design your image
• What will the links be?
• How will you divide up the image?
• You might try a freehand sketch
• Create your image using PaintShop Pro,
  Lview,Xres, PhotoShop etc.
• Create a map file describing where to send a user
  when they click on a particular part of an image
• Move the image and map file to your
  public_html/multim folder

7
For ExampleThe Homework Assignment

• Create a Rectangular Box and then put text in it
  (Use x\is\nwhite\multim\lview\lview1bp.exe
• Check Coordinates and save as GIF
• Create Client Side Map file
• Move sample page to your sales account
• Multim folder
• Call it imagemap.htm

8
Anchor statement for map file

• ltIMG SRChttp//www.stern.nyu.edu/userid.multim/
  image1.gif usemapmapname gt
• ltmap namemapnamegt
• Map definitions
• lt/mapgt

9
Map File Definitions

• MAPEDIT will create them automatically
• Client Side maps can then be used
• Client side imagemaps
• Map definitions are in html code
• Browser interprets the map
• User can see URL where they will be sent
• Server side image maps
• Map definitions are in separate map file on
  server
• User only sees coordinates, not URL
• Slower, since needs to invoke CGI program
• Client side image maps are required for homework
  assignment!

10
An imagemap is a collection of points, polygons,
rectangles and circlesEach element describes an
area of the image and the URL to transfer the
user to when they click on that area.. Try to
keep the individual items in the mapspaced out
far enough so a user will clearly know what he or
she is clicking on.
11
beginning with are comments. Every other
non-blank line consists of the following
method URL coord1 coord2 ... coordn method is
one of the following default - For the
default URL Coordinates none
circle - For a circle Coordinates
center edgepoint poly - For a polygon of at
most 100 vertices Coordinates Each coordinate
is a vertex. rect - For a rectangle
Coordinates upper-left lower-right point
- For closest to a point Coordinate
thePoint URL is one of the following A
Local URL ex. /docs/tutorials A
Full URL ex. http//www.yahoo.com/
coord Each coord entry is a coordinate,
format x,y. The number depends on the method.
12
Client Side Image Map

• ltmap nametestmapgt
• ltarea shaperect hrefhttp//www.stern.nyu.edu
  
• COORDS 0, 0, 200, 50 ALTSterngt
• ltarea shape rect href mypage.htm
• COORDS 0, 100 , 200, 100 ALTMypagegt
• lt/mapgt

13
Sample Image 200, 100
200, 0
0,0
200,50
0,50
0,100
200, 100
14
To use client side map

• ltmap name testmapgt
• .
• lt/mapgt
• ltIMG SRCIMAGE.GIF usemaptestmapgt

15
Some Things to Remember

• Coordinates are in X, Y format
• Units are pixels
• Top Left is 0,0
• Top Right is XMAX, 0
• Bottom left is 0, YMAX
• Bottom right is XMAX, YMAX

16
Lview

• There is a version of LVIEW Pro on the X drive in
  the labs
• X\is\nwhite\multim\lview\lviewp1bp.exe
• LVIEW will convert between Gifs, JPEGS and do a
  variety of other basic graphic operations

17
So lets do home work assignment

• 1) Create image using LVIEW
• Keep track of coordinates
• 2) Move Image to web server
• 3) Create a web page with an client side image
  map in it.

18
To make it easy

• Image will be 200 pixels wide, 100 high
• Multimedia link will be on left
• Homepage link on right
• So left rectangle will be 0,0 100, 100
• Right rectangle will be 100, 0 200, 100
• What will map look like? You work on this
• While I create image.