SPLASH PAGE Image Map

YOUR GRADED ASSIGNMENT
Make a NEW page called splash.html
make sure it has the core code,
create a graphical collage menu image
corresponding to your 5 project pages.
In the <body> . . . </body> put the image and map code
SAVE

A splash page is often used as a fast loading simple entry page before going to the home page.
It is a single image (or collage) with specific areas on the image that are clickable
and allow the site user to jump directly to a specific page
or quickly notify the random surfer that this might not be the site they were looking for.

Move the Mouse over the picture below and
try clicking on various HOT SPOT areas.


<img src="img2big.gif" width="340" height="368" usemap="#wolfmap" border="0">
...
<map name="wolfmap">
<area shape="circle" coords="208, 125, 25" href="howl.wav" title="Hear me howl!">
<area shape="rect" coords="132, 159, 192, 201" href="howl.avi" title="See me howl!">
<area shape="poly" coords="91, 241, 96, 167, 126, 223" href="banner.gif" title="See an animated GIF!">
<map>

The HOT ZONES are coded below and require you to be MULTI-TASKING in a paint
program. Most all paint programs will give you the necessary pixel information to create
the hypertext hot zones. The width and height in pixels of your image must also be known.
Hot zones must not overlap.

shape="circle" coords="208,125,25"
shape="rect" coords="132,159,192,201"
shape="poly" coords="91,241,96,167,126,223"

For a circle, the first 2 numbers are the center location and the 3rd is the radius in pixels
For a
rectangle, the opposite corner locations are required. And for a polygon, every point
in sequence (like "connect the dots) must be provided. By placing the cursor pointer/crosshairs
on your image in the paint program you can determine the coordinates of every pixel

You might even make an image map MENU with FRAMES!


Assignment Example
the image below has 5 pics that correspond to the 5 page topics

HOME! FRIENDS!!! QUOTES! Photos! LINKS!!!

<img src="splash.gif" width="320" height="240" usemap="#splash" border="0">
...
<map name="splash">
<area shape="rect" coords="120,17,202,62" href="home.html" title="HOME!">
<area shape="rect" coords="48,71,121,121" href="friends.html" title="FRIENDS!!!">
<area shape="circle" coords="90,180,37" href="quotes.html" title="QUOTES!">
<area shape="rect" coords="135,97,206,168" href="pics.html" title="Photos!">
<area shape="rect" coords="218,69,270,200" href="links.html" title="LINKS!!!">
</map>