Homework 8
Image Map Exercise
For this assignment you will create a web page with an image map
ofthe current U.S. Supreme Court justices.
When the user clicks on one of the individuals in the photo
it should link to a web page on the Internet
about that person (use Google or Wikipedia to find one).
More details below:
Specifications
-
Copy the supremeCourt2009.jpg file that you here on
this web page. Do so by right-clicking on the image and
save it to your computer.
-
Set the window title of your web page to
2009 US Supreme Court.
-
The headings, the supreme court image, and the
caption beneath it (all described below) should be centered
on the page.
-
The largest size heading at the top should say
U.S. Supreme Court Justices - 2009
and a smaller heading underneath that reads
Image Map by NAME
(where NAME is your own name).
-
Immediately beneath the photo (with no line of blank space)
should be the following caption that you will need to
break up yourself so that it is not wider than the picture:
Front row (L-R): Associate Justice Anthony M. Kennedy,
Associate Justice John Paul Stevens, Chief Justice John G. Roberts,
Associate Justice Antonin Scalia, and Associate Justice Clarence Thomas.
Back Row (L-R), Associate Justice Samuel Alito Jr.,
Associate Justice Ruth Bader Ginsburg,
Associate Justice Stephen Breyer, and Associate Justice Sonia Sotomayor.
-
For each of the area links insert the attribute
target="_blank", which will have the same effect that it
did when we used it in html a-tags (to open the page in a separate
window or tab).
-
Use Microsoft Photo Editor to determine the coordinates that you need.
Write down these coordinate values before getting started on your
web page. I want you to use two or more of each type of
shape for the 9 justices: circle, rectangle, and polygon.
-
Test your webpage to see if the image maps link to
the correct sites that you have chosen. I will be checking to
see that your areas are cover the appropriate person without being
too small or too large. One trick you can use to visually see each
shape is to press the tab key several times to cycle through them.
-
As with prior web page assignments, add a validation link
at the bottom of the web page and make sure that it validates.