Transcript Creating an Image Map

HTML
Concepts and Techniques
Fifth Edition
Chapter 5
Creating an
Image Map
Chapter Objectives
• Define terms relating to image mapping
• List the differences between server-side and clientside image maps
• Name the two components of an image map and
describe the steps to implement an image map
• Distinguish between appropriate and inappropriate
images for mapping
• Sketch hotspots on an image
• Describe how the x- and y-coordinates relate to
vertical and horizontal alignment
• Open an image in Paint and use Paint to map the
coordinates
Chapter 5: Creating an Image Map
2
Chapter Objectives
• Create the home page and additional Web pages
• Create a table, insert an image into a table, and
use the usemap attribute to define an image map
• Add text to a table cell and create a horizontal
menu bar with text links
• Use the <map> </map> tags to start and end a
map
• Use the <area> tag to indicate the shape,
coordinates, and URL for a mapped area
• Change link colors
Chapter 5: Creating an Image Map
3
Image maps - examples
• Turn to pg. 205 – we’ll start there looking at
examples of image maps.
• Hazard of using image maps – if images DON’T
load, users can’t navigate the page.
• To help remedy this, make sure you have text
links to the same content.
• Discuss some of the ways image maps are used
• Just basically create hot spots in a image that are
clickable.
Chapter 5: Creating an Image Map
4
Server-side vs. client-side
• Server-side image maps – displayed by the client
in a browser but implemented by a program that
runs on the server. Web server does all the work
– processes the X,Y coordinates and relates it
back to the client.
• Client-side image maps – Browser does all the
work. Faster response time! This is the preferred
way. HTML code contains the X,Y coordinates
and takes care of it all. *NOTE – Older browsers
might not support client-side image mapping.
Chapter 5: Creating an Image Map
5
Creating an image map
• Pg. 211-212 – see how the images have the hot
spots sketched out.
• You have to determine the X,Y coordinates for
each area you want to be clickable.
• X-axis – horizontal
• Y-axis – vertical
• Look at the status bar in Paint to see the
coordinates.
Chapter 5: Creating an Image Map
6
Different shapes
• Rectangle – top left and bottom right corners
• Circle – Center point and the radius (you must
calculate this based on the distance from the
center point to the edge of the circle)
• Polygon – Coordinates for each corner you wish
to use
• See pg. 214-215 for examples.
Chapter 5: Creating an Image Map
7
Copy files from Public
• Create a Ch. 5 directory in your home directory.
• Go to P:\HTML Stuff\Chapter05\ChapterFiles and
copy all of these to your home directory
• Read the project on pg. 202.
• Open southwest.jpg in PAINT.
Chapter 5: Creating an Image Map
8
Opening an Image File in Paint
Chapter 5: Creating an Image Map
9
Locating X- and Y- Coordinates
of an Image
• Do pg. 220-221 to locate the coordinates for this image.
• We use Paint, but there are other image mapping tools such
as:
– Mapedit (Windows, UNIX, Mac OS)
– CoffeeCup Image Mapper – Windows
– Imaptool – Linux/X-Window
• There are also tools you can use to create images that can be
used for image mapping such as Adobe Photoshop!
Chapter 5: Creating an Image Map
10
Starting Notepad and Entering Initial
HTML Tags
Make sure you use your template file – it has the correct DOCTYPE
statement for validation! Then make it match this table (pg. 223)
Chapter 5: Creating an Image Map
11
Creating a Table
• DO pg. 225-229 – Creating a table
• When you are finished, it will look like the
next slide – pg. 229
Chapter 5: Creating an Image Map
12
Ending the Table
Chapter 5: Creating an Image Map
13
Coding an image map
• Look on pg. 230 to see the tags and attributes for
image mapping.
Chapter 5: Creating an Image Map
14
Creating an Image Map
• Do pg. 231
• When finished, validate this and show it to me.
• This finishes our first page, now we have to
create the subsequent ‘Linked’ pages for our
image.
Chapter 5: Creating an Image Map
15
Validating, Viewing, and Printing a
Web Page
Chapter 5: Creating an Image Map
16
Copying and Pasting HTML Code to a
New File
• Do pages 237-242 to create the 2nd page of this
process.
• Validate this page… it should look like the following
slide (pg. 245)
• Show me.
Chapter 5: Creating an Image Map
17
Validating, Viewing, and Printing the
Web Page
Chapter 5: Creating an Image Map
18
Testing the Links
• Click the Home link on the Arizona Web page
• Click the Nevada area on the image map on the
home page
• Click the California link on the Nevada Web page
• Click the Home link on the California Web page
• If any of the links do not work correctly, return to
Notepad to modify the HTML code, save the
changes, and then retest the links in the browser
Chapter 5: Creating an Image Map
19
Testing the Links
Chapter 5: Creating an Image Map
20
Finished…now What?
• Homework – Due next •
class meeting
•
• Got to
•
scsite.com/html5e/learn
and do the practice test.
• You will get the grade •
you turn in.
Chapter 5: Creating an Image Map
Project:
In the Lab – Lab 3
Pay attention to details
and do EXACTLY what
you are asked to do.
For state web sites, you
can include
convention/visitors
bureau, parks, etc. in
addition to the ones
recommended. JUST
PICK ONE TYPE!
21