BISI 4400

Image Maps

Image Maps

• What is it?

The Image has defined areas on its surface that can be used to trigger HTML events ---Example

Image Maps

Applications of Image maps

• Image maps and their "hot spots" are mostly used for navigation functions

• moving to another page

• trigger advanced HTML and Java Script events

Image Maps

• Examples of image maps• Some are highly creative and are not easily

identifiable as image maps – E.g. Atlas web magazine page

• Others are strictly utilitarian – NASA crew page – homepage – Noa's ArtTown – Sylvan Forest – World Geography – Travel Indiana

Image Maps

What do I need?

• An Image Processing Program – anything from the most basic paint program to

a professional package like Photoshop, provided it can save image files in either JPEG (.jpg) or GIF (.gif) format, and it can display image coordinates

• An HTML editor

Image Maps

How do I do it?

1. Create a suitable image – save your graphic as either a JPEG (.jpg) or

GIF (.gif) file. – Each format has its advantages depending

on the type of image you are saving. – Use JPEG for colorful photographic images.

Use GIF for line art and text.

Image Maps

How do I do it?

2. Determine hot-spot areas – determine the coordinates of the virtual

shape that will be the "hot-spot" area.

Image Maps

How do I do it?3. Add HTML code<IMG USEMAP="#MyMap" SRC="MyImage.jpg"

BORDER="0"><MAP NAME=“MyMap”>

<AREA SHAPE="Polygon" HREF="Page1.html" COORDS="131,294 395,294 395,330 171,330">

<AREA SHAPE="Circle" HREF="Page2.html" COORDS="234,349 15">

<AREA SHAPE="Point" HREF="Page3.html" COORDS="234,349">

</MAP>

Image Maps

Generating image map programs• Use

– Photoshop– MapEdit– FontPage– Add this code:

• <A HREF=""><IMG SRC="myimage.gif" ISMAP></A> where myimage is the name of YOUR image. Then open the page in Netscape or Explorer. When you move the mouse over the image you will see the coordinates at the bottom of the screen.