Working with

-        image map

-        frame

Create the banner as shown in Fig.3-58 on pg.3.57 as an IMAGE MAP:

  1. Copy banner.jpg from http://sweb.uky.edu/~dsianita/banner.jpg
  2. Create banner.html with the following code:

 <HTML>

<HEAD>

<TITLE>Banner</TITLE>

</HEAD>

<BODY>

<IMG SRC="banner.jpg" USEMAP="#Logo" BORDER=0><BR>

Click for Breakfast, Lunch, or Dinner menu

</BODY>

</HTML>

  1. Center the image "banner.jpg" by treating it as a header:

<H5 ALIGN=CENTER>

     <IMG …>

</H5>

  1. Define the 3 hotspots:

<MAP NAME="Logo">

<AREA HREF="http://sweb.uky.edu/~dsianita/dinner.html"

  SHAPE=RECT COORDS="464, 40, 568, 77">

<AREA HREF="brkfst.html" SHAPE=RECT COORDS="20,40,156,77">

<AREA HREF="lunch.html" SHAPE=RECT COORDS="241,40,336,77">

</MAP>

 

Frames & web page design

  1. Put Kelsey's Dinner banner in the first row frame
  2. Display breakfast menu in the second row frame

<FRAMESET ROWS="120,*">

<FRAME SRC="banner.html" MarginHeight=5 Scrolling=no NoResize>

<FRAME SRC="Brkfst.html" NAME=main>

</FRAMESET>

  1. Update banner.html so that the targets for the links are in the second row frame

Either use the <BASE TARGET> tag

Or the TARGET property within each <AREA> tag

** show the use of magic target name as shown in Fig.5-23

<HTML>

<HEAD>

<TITLE>Banner</TITLE>

<BASE TARGET=main>

</HEAD>

<BODY>

<H5 ALIGN=center>

<IMG SRC="banner.jpg" USEMAP="#Logo" BORDER=0><BR>

Click for Breakfast, Lunch, or Dinner menu

</H5>

<MAP NAME="Logo">

<AREA HREF="http://sweb.uky.edu/~dsianita/dinner.html"

  SHAPE=RECT COORDS="464, 40, 568, 77" TARGET=main>

<AREA HREF="brkfst.html" SHAPE=RECT COORDS="20,40,156,77" TARGET=_self>

<AREA HREF="lunch.html" SHAPE=RECT COORDS="241,40,336,77" TARGET=_blank>

</MAP>

</BODY>

</HTML>


  1. Show nested frame

<FRAMESET ROWS="120,*">

<FRAME SRC="banner.html" MarginHeight=5 Scrolling=no NoResize>

   <FRAMESET COLS="140,*">

   <FRAME SRC="toc.html">

   <FRAME SRC="Brkfst.html" NAME=main>

   </FRAMESET>

</FRAMESE>

  1. Create the corresponding toc.html:

<HTML>

<HEAD>

<TITLE>Table of Content</TITLE>

</HEAD>

<BASE TARGET=main>

<BODY>

<H4>Menu Choices:

</H4>

<UL>

<LI><A HREF="Brkfst.html">Breakfast</A>

<LI><A HREF="lunch.html">Lunch</A>

<LI><A HREF="http://sweb.uky.edu/~dsianita/dinner.html">Dinner</A>

</UL>

</BODY>

</HTML>