|
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
| 
Fly