Make your own free website on Tripod.com

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

SHAPE

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

If omitted, "rect" is understood

Default shape creates an everything else region

COORDS

Coordinates which define the shape

AREA tag Attributes

HREF

Specifies the region’s link

ALT

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

NOHREF

Provides "inactive" regions that do not link

Example

<area

Shape="rect"

COORDS="20,40,100,120"

HREF="car.htm"

ALT="Car Dealership">

Defines a rectangular area on a picture that matches the coordinates

Tips

Coordinates may be given as

Absolutes

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

<map>…</map>

Must be named with the NAME attribute

Naming allows IMG tag to reference properly with the USEMAP attribute

Example

<map name="TRAVEL"

Area tags go next

</map>

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

Easier Way

Programs called Image Map Editors

MapEdit 

Easy image map program

www.boutell.com

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

Tutorial

Tutorials on Image maps

http://ils.unc.edu/utils/imagemap-tutorial.html

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

MapEdit 

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

JavaScript

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

www.geocities.com/SunsetStrip/Alley/5616/msjava.htm

www.javaboutique.internet.com

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

Windows

Status bar

Browser test

Date and time displays

Alert messages

Sites of Interest

http://www.javaboutique.internet.com

http://www.geocities.com/SunsetStrip/Alley/5616

http://www.december.com/works/java/info.html

http://www.teleport.com/~danal/Pages/making1.#JA

http://www.3dsite.com/3dsite

http://www.iconbazaar.com

Image Maps

Advantages

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

Disadvantages

Before editors—too difficult and time consuming to create

JavaScript

Advantages

Movement on your page

Provide more interest to the site

Ads

Disadvantages

Can slow the load of the page

Can be too busy

 
This page was updated on:  04/10/02