View
213
Download
0
Category
Preview:
Citation preview
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.
Recommended