Imagemaps
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
An Image Map links the areas of an image with a series of URLs so that a click in each area brings the user to a different page. Another way of describing and Image Map is an image that contains designated hotspots, each with its own URL link.

To Create In HTML:

<MAP NAME="label"> label is the name of the map

<AREA SHAPE="type" COORDS="n, n, n..." HREF="url.html">

</MAP>

Shape types:

RECT         COORDS="x1, y1, x2, y2"                   top, left, bottom and right
CIRCLE     COORDS="x, y, r"                                 x, y (center) and radius
POLY         COORDS="x1, y1, x2, y2, x3, y3..."    top, clockwise, x, y values of each point

Add new <AREA> tag for each defined area:

<MAP NAME="label">

<AREA SHAPE="type" COORDS="n, n, n..." HREF="url.html">
<AREA SHAPE="type" COORDS="n, n, n..." HREF="url.html">

</MAP>

To call the image that the map is applied to:

<IMG SRC="image.gif" USEMAP="#label">     (NAME in MAP)

 

To Determine Coordinates In Photoshop:

1. Open your image
2. Windows > Palettes > Show Info
3. Edit > Preferences > Display & Cursors... Other > Precise
4. Edit > Preferences > Units & Rulers > Units: Rulers > Pixels
5. Point cursor in top-left corner of rectangular image
6. Using Info window, write down x and y coordinates
7. Move cursor to Bottom-right; write down x and y coordinates (and repeat for each point of polygon)
8. Circle is trickier: Use Rectangular Marquee to draw a box at the center (diameter), take 1/2 of W for Radius; for x, y - place cursor at center of the circle and take the x, y reading from the Info Palette
9. Browse file and confirm that maps are positioned correctly, or adjust coordinates until perfect.

 

To Create Tool-based Image Maps in ImageReady:

1. Select Rect, Cir, or Poly Image Map Tool in Toolbox (under slice tool)
2. For Rect/Cir = drag over area to define (shift=square, Option-drag for center)
For Poly - Click in order around area to define (shift=45 deg), close w/ double click
3. To adjust use Image Map select tool (with Arrow)
4. In Image Map palette, add area name, URL, and ALT (include http:// for absolute URLs)
5. Repeat for ALL MAP AREAS
6. File > OUTPUT SETTINGS > Image Maps should be set to Client-side
7. File > Save Optimized - set Format: HTML and IMAGES, it will give you the image map code to copy and paste into your html page.

 

Image Map Example:

Click anywhere

CODE:

<img src="../images/themap.gif" width=400 height=400 alt="click anywhere" border="1" USEMAP="#label">

<MAP NAME="label">

<AREA SHAPE="RECT" COORDS="209,146,364,252" HREF="http://www.bgsu.edu" target="_blank">
<AREA SHAPE="CIRCLE" COORDS="94,92,60" HREF="http://webmonkey.com" target="_blank">
<AREA SHAPE="POLY" COORDS="89,215,129,264,79,333,27,299,21,228,49,255" HREF="http://hotmail.com" target="_blank">

</MAP>