---

Web Page Design
HTML Tutorial
PART 4: Animation & Area Maps

---

Click here to return to "outline" page"

Table of Contents

1.   Animated GIF files
   1.   Constructing the animation
   2.   Placement
   3.   Issues to consider
2.   Marquee
   1.   MARQUEE tag
   2.   Placement
   3.   Issues to consider
3.   Area Maps
   1.   Area map overview
   2.   Area map tags
   3.   Issues to consider

---

A.   Animated GIF files

---

A - 1.   Constructing the animation

• What is an animated gif?

  An animated GIF file is nothing more than a series of pictures. The computer cycles through the list showing each picture for a short period of time. If your pictures are sequenced and timed properly, the "image" will appear to move.

• Code:
  

  <CENTER><IMG SRC="pic2-1.gif"></CENTER>

• Example:
  

• To create an animated GIF, you must use a program designed for that purpose. Many graphics programs have that feature.

• File format

• Software

---

A - 2.   Placement

• Size
• Continuous vs. one to several iterations
• Like any other picture

---

A - 3.   Issues to consider

• User considerations
• Clutter vs. purpose
• Design & Interest

---

B.   Marquee

---

B - 1.   MARQUEE tag

• Tag components:
  

  <MARQUEE
  	ALIGN=bottom 
  	BEHAVIOR=scroll
  	BGCOLOR=blue
  	DIRECTION=left
  	HEIGHT=20%
  	HSPACE=10%
  	LOOP=infinite
  	SCROLLAMOUNT=5
  	SCROLLDELAY=1
  	VSPACE=5
  	WIDTH=90% >
  	Welcome to the WEB PAGE DESIGN HTML TUTORIAL!
  </MARQUEE>
  

• ALIGN=align-type. Specifies how the surrounding text should align with the marquee. The align-type can be one of these values:
  • TOP - Surrounding text aligns with the top of the marquee.
  • MIDDLE - Surrounding text aligns with the middle of the marquee.
  • BOTTOM - Surrounding text aligns with the bottom of the marquee.

• BEHAVIOR=type. Specifies how the text should behave. The type can be one of these values:
  • SCROLL - Start completely off one side, scroll all the way across and completely off, and then start again. This is the default.
  • SLIDE - Start completely off one side, scroll in, and stop as soon as the text touches the other margin.
  • ALTERNATE - Bounce back and forth within the marquee.

• BGCOLOR=color - Specifies a background color for the marquee. The color can be either a hexadecimal number (optionally preceded by a number (#) sign) specifying a red, green, and blue color value, or a predefined color name as described in Color.

• DIRECTION=direction. Specifies which direction the text should scroll. The direction can be LEFT or RIGHT. The default is LEFT, which means scrolling to the left from the right.

• HEIGHT=n. Specifies the height of the marquee, either in pixels or as a percentage of the screen height. To specify a percentage, the n must be end with a percent (%) sign.

• HSPACE=n. Specifies left and right margins for the outside of the marquee, in pixels.

• LOOP=n. Specifies how many times a marquee will loop when activated. If n=-1, or if LOOP=INFINITE is specified, it will loop indefinitely.

• SCROLLAMOUNT=n. Specifies the number of pixels between each successive draw of the marquee text.

• SCROLLDELAY=n. Specifies the number of milliseconds between each successive draw of the marquee text.

• VSPACE=n. Specifies top and bottom margins for the outside of the marquee, in pixels.

• WIDTH=n. Sets the width of the marquee, either in pixels or as a percentage of the screen width. To specify a percentage, the n must end with a percent (%) sign.

---

• Code:
  

  <MARQUEE 
  DIRECTION=LEFT 
  BEHAVIOR=SCROLL 
  SCROLLAMOUNT=10 
  SCROLLDELAY=200>
  This is a scrolling marquee.
  </MARQUEE>
  

• Example:
  This is a scrolling marquee.

---

B - 2.   Placement

• Size
• Continuous vs. one to several iterations
• Like any other picture

---

B - 3.   Issues to consider

• User considerations
• Clutter vs. purpose
• Design & Interest

---

C.   Area Maps

---

C - 1.   Area map overview

• An "area map" is an image which has been created so that the viewer may "click" on certain parts of the image which will make a hyperlink to some other topic or page.

• For example, you could have a picture of the United States. When the user "clicks" on a particular state, control will "jump" to a topic dealing with that state.

• To create an image map, programming can be on the "server" or in the HTML program which is the "client." Having "server side" programming requires coordination with your ISP and is more complex. We will discuss only client side programming which is HTML code in your HTML program.

---

C - 2.   Area map tags

• Code:
  

  On the world map, make a selection . . .<br>
  <ul>
  <li>Click on North America and go to test1.htm
  <li>Click on South America and go to test1.htm
  <li>Click on Africa and go to test2.htm
  <li>Click on Asia and go to test2.htm
  <li>Click on Australia and go to test1.htm
  </ul>
  <!- The map is 472 pixels wide (X) and 271 pixels high (Y) ->
  <MAP NAME="map1">
  <!- click on North America and go to ann.htm ->
  <AREA SHAPE="CIRCLE" COORDS="100, 120, 70" HREF="test1.htm""> 
  <AREA SHAPE="CIRCLE" COORDS="150, 215, 70" HREF="test1.htm"> 
  <AREA SHAPE="CIRCLE" COORDS="250, 180, 70" HREF="test2.htm"> 
  <AREA SHAPE="CIRCLE" COORDS="330, 108, 80" HREF="test2.htm"> 
  <AREA SHAPE="CIRCLE" COORDS="405, 225, 40" HREF="test1.htm"> 
  </MAP>
  <IMG BORDER=0 SRC="world.gif" USEMAP="#map1">
  

• Example:
  On the world map, make a selection . . .
  
  • Click on North America and go to test1.htm
  • Click on South America and go to test1.htm
  • Click on Africa and go to test2.htm
  • Click on Asia and go to test2.htm
  • Click on Australia and go to test1.htm
  

  ---

  C - 3.   Issues to consider
  • User considerations
  • Clutter vs. purpose
  • Design & Interest

  ---

  Return to top of page