Working with

-         image map

-         frame

Create the banner as an IMAGE MAP:

  1. Copy banner.jpg from http://locker.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://locker.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

Ø      Put Kelsey's Dinner banner in the first row frame

Ø      Display breakfast menu in the second row frame

1.  Create home.html with the following code:

<HTML>

<FRAMESET ROWS="120,*">

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

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

</FRAMESET>

</HTML>

 

  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>

</FRAMESET>

 

  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://locker.uky.edu/~dsianita/dinner.html">Dinner</A>

</UL>

</BODY>

</HTML> 

 

  1. Floating frame: to display the menus

Add the following code to toc.html and save it as float.html:

   <iframe src=brkfst.html align=right width=600 height=400 name=main>

   </iframe>


  1. To accommodate frame-blind browsers – create the following brkfstnf.html from brkfst.html:

<HTML>

…

<BODY …>

<TABLE ALIGN=CENTER WIDTH=100%>

<TR>

<! Table of content>

<TD WIDTH=20% BGCOLOR=GREEN VALIGN=TOP ALIGN=CENTER>

<IMG ALT="Company Logo" SRC="LOGO.jpg"><BR>

<H3>

<A HREF="brkfstnf.html">Breakfast</A><BR>

<A HREF="lunchnf.html">Lunch</A><BR>

<A HREF="dinnernf.html">Dinner</A><BR>

</H3>

</TD>

<!Breakfast Menu>

<TD>

<IMG SRC="banner.jpg"><BR>

<P ALIGN=CENTER><B><FONT COLOR=GREEN SIZE=5>Breakfast Menu</A></FONT><BR>

Served 6:30 a.m. - 11:00 a.m.</B></P>

<HR>

…