LESSON 30: CREATING IMAGEMAPS

  1. Study the index cards on Creating Imagemaps. I've included a hard copy of these index cards, for your convenience.
  2. Be sure that you can answer all the following questions, which are fair game for quizzes and tests.
    1. What are the three components required for a client-side imagemap?
    2. What question is answered inside the <MAP> </MAP> container of a client-side imagemap?
    3. Where does the USEMAP attribute go, for a client-side imagemap?
    4. What is the symbol # called?
    5. In an imagemap, you create a map and give it a name; then, you refer to this name. What tag is used to create the map?
    6. In an imagemap, you create a map and give it a name; then, you refer to this name. Suppose a map is named "circle_map", and you want to apply this map to the image "circle.gif". Write the IMG tag to do this.
    7. What is the purpose of the <AREA> tag inside the <MAP> </MAP> container?
    8. Is the AREA tag a container tag, or a stand-alone tag?
    9. Suppose that an imagemap will have four "hot-spots". Then, how many AREA will there be inside the <MAP> </MAP> container?
    10. The SHAPE attribute inside the AREA tag was discussed like this:
      SHAPE="rect|rectangle|circ|circle|poly|polygon"
      What do the "|" symbols mean here?
    11. What are the three possible shapes for "hot-spots" in a client-side imagemap?
    12. What is the purpose of the TITLE attribute within the AREA tag for an imagemap?
    13. What is often used as a TITLE for a hot-spot in an imagemap?
    14. What attribute inside the AREA for an imagemap answers the question: Where should the user go if this region is clicked?
    15. An AREA tag for an imagemap should always have five attributes; what are these five attributes?
    16. The COORDS attribute inside the AREA tag gives the coordinates for each hot-spot. Fill in the blanks: all coordinates are given in                    , and are measured from the                    corner of the image being used for the imagemap. THE positive x-direction is                    ; the positive y-direction is                   . Also, all coordinates must be                   .
    17. Consider this code: SHAPE="rect" COORDS="x1,y1,x2,y2"
      What is (x1,y1)?
    18. Consider this code: SHAPE="rect" COORDS="x1,y1,x2,y2"
      What is (x2,y2)?
    19. Consider this code: SHAPE="circ" COORDS="x1,x2,x3"
      What numbers give the center of the circle?
    20. Consider this code: SHAPE="circ" COORDS="x1,x2,x3"
      What numbers give the radius of the circle?
    21. Consider this code: SHAPE="poly" COORDS="x1,x2,x3,x4,x5,x6"
      How many vertices are there in polygon being described? What is the common name for the type of polygon being described?
    22. Consider this code: SHAPE="poly" COORDS="x1,x2,x3,x4,x5,x6,x7,x8"
      How many vertices are there in polygon being described? What is the common name for the type of polygon being described?
    23. Write the SHAPE="" COORDS="" code to describe the rectangle in the image below, assuming each "grid" mark is 10 pixels.
    24. Write the SHAPE="" COORDS="" code to describe the circle in the image below, assuming each "grid" mark is 10 pixels.
    25. Write three different sets of SHAPE="" COORDS="" code to describe the triangle in the image below, assuming each "grid" mark is 10 pixels.
  3. Create an imagemap for the circle/triangle/rectangle image below. This is worth 20 points. You should show me that your imagemap works, and also print out your source code to pass in to me.

    Here are some steps to get you started:
    1. Copy the image into your personal folder.
    2. Create an HTML file that displays this image, sized with HEIGHT=419 and WIDTH=604.
    3. PRINT OUT a copy of the image, so that you have a hard-copy to measure.
    4. Measure the width of your print-out, in inches (say, 6.4").
    5. Measure from the left border to the center of the circle (say, 1.4").
    6. Set up a ratio to find out how many pixels, x, it is from the left border to the center of the circle:
      6.4/604 = 1.4/x . Solving gives x = (1.4/6.4)*(604).which is about 132 pixels.
    7. Mark all the pixel measurements that are needed, in pencil, on your print-out of the image.
    8. Create an imagemap, where the circle goes to "http://fishcaro.crosswinds.net", the triangle goes to your personal homepage, and the rectangle goes to "http://www.google.com".
    9. Make sure that you have appropriate TITLEs to give a clue to where each part of the image goes!
  4. For the remainder of the week, you will continue practicing with imagemaps by working with this image:

    1. Sheets containing pictures of the desired "hot-spots" will be passed out in class. There are four imagemaps that you are to create; these are worth 10 points each (40 points total).
    2. You may use any URLs you want for the hot-spots. I will be checking for accuracy of the hot-spot areas.
    3. The ORDER that you list the AREA tags may be important in creating some of these imagemaps! Remember: if hot-spots overlap, and a user clicks on the overlap area, then the FIRST area tag that includes the selected coordinates will be used.

THE QUIZ OVER THIS LESSON WILL CONSIST OF:
Prepare for the quiz over this section by practicing below.
Questions are asked in random order.
You can generate a printable quiz with solutions.








How many problems would you like on the quiz? (25 max)