Make your own free website on

Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]


Image Maps and JavaScript

More ways to change the "Look" of the page

Image Map—What is it?

A graphic on which active link areas have been placed

Serves as a navigation bar for a web site

Draw the Picture or Find a Graphic

Design an image map for interaction

Create easy-to-understand sections

Clarity is key

Segregate in your mind what will be selectable and what is for visual appeal

Make a list of what features you want contained in your image

Interaction Regions

Define the interaction regions

Lay out by hand in PSP

You need an image processing program that reports mouse coordinates

These regions are invisible to users and do not change the original picture

Convert regions to area tags

<area> tag

Supports five attributes


"rect" "circle" "poly" "default"

If omitted, "rect" is understood

Default shape creates an everything else region


Coordinates which define the shape

AREA tag Attributes


Specifies the region’s link


Provides the "hint text" for display in the status bar


Provides "inactive" regions that do not link






ALT="Car Dealership">

Defines a rectangular area on a picture that matches the coordinates


Coordinates may be given as


Percentages of the images width and height

When regions overlap, the first defined has precedence

Put NOHREF areas first and "default" areas last

Put it All Together

Combine area tags into the map container


Must be named with the NAME attribute

Naming allows IMG tag to reference properly with the USEMAP attribute


<map name="TRAVEL"

Area tags go next


<img src="travel.gif usemap="#travel"

Easier Way

Programs called Image Map Editors


Easy image map program

Simple to create and embed images in HTML documents

Effective Image Maps

Be redundant

Include list of links below the map for old browsers or those who have image load off

Be bold

Use clear, bold pictures

Easy to read fonts

Be non-linear

Don’t be stuck in the straight line zone

Use creativity

Let pictures be multidimensional (PSP)

Be reusable

Design reusable information spaces in your map

These are hard, create a reusable item

Be consistent

Match your colors, styles, fonts to rest of page

Be compact

Compressed images

Untextured backgrounds

Don’t let image overwhelm the user

Fast load important

Be concrete

Don’t make users guess at meaning

Use icons that link to what they stand for and your page topic

Be appropriate

Serious page—serious image map

Fun page—fun image

Image Maps

Place regions onto images that link to other elements

Create effective navigation tools for a web page

Difficult to do by hand—easier to use an image mapping editor


Tutorials on Image maps

To do on your own

Need program like PSP that shows you the coordinates on the image so that you can define the active area


Allows you to draw the areas in so you don’t have to know the coordinates


Scripting language that resulted from the programming language Java

Can be included directly into any HTML document

Harder to learn than HTML

Lots of scripts available from the web

Easy to copy and paste directly into your HTML document

Modify to suit your needs

What to do?

Go to one of the following sites

Copy or download a JavaScript or a Java Applet

Paste it on your web page

Modify it to meet your needs

Be sure to watch for the notation (FREE) before you make your pick

onClick Alert Message Link

Generates an alert message in response to a mouse click

Modify it to say what you want

You can make it work with any link that will leave your site

What can I do?

Navigation bars

Banners, scrolling message bars, scrolling banners


Status bar

Browser test

Date and time displays

Alert messages

Sites of Interest

Image Maps


Adds some interesting effects to your pages

Image Maps give a more professional "look" to the page

You can use a digital picture of your school, business, home

By image mapping you can open the door and go inside to a virtual tour

Your are only limited by your imagination


Before editors—too difficult and time consuming to create



Movement on your page

Provide more interest to the site



Can slow the load of the page

Can be too busy

This page was updated on:  04/10/02