Workshop

Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the "Answers" section that follows.

Quiz

1:

You have a 200x200-pixel image named quarters.gif for your web page. When viewers click the upper-left quarter of the image, you want them to get a page named topleft.html. When they click the upper-right quarter, they should get topright.html. Clicking the lower left should bring up bottomleft.html, and the lower right should lead to bottomright.html. Write the HTML to implement this as an imagemap.

2:

How could you implement the effect described in question 1 without using imagemaps at all?

Answers

A1:

<map id="quartersmap"> <area shape="rect" coords="0,0,99,99" href="topleft.html" alt="" /> <area shape="rect" coords="100,0,199,99" href="topright.html" alt="" /> <area shape="rect" coords="0,100,99,199" href="bottomleft.html" alt="" /> <area shape="rect" coords="100,100,199,199" href="bottomright.html" alt="" /> </map> <img src="quarters.gif" width="200" height="200" usemap="#quartersmap" alt="" title="" />

A2:

Use a graphics program to chop the image into four quarters and save them as separate images named topleft.gif, topright.gif, bottomleft.gif, and bottomright.gif. Then write this: <a href="topleft.html"><img src="topleft.gif" width="100" height="100" border="0" /></a> <a href="topright.html"><img src="topright.gif" width="100" height="100" border="0" /></a> <br /> <a href="bottomleft.html"><img src="bottomleft.gif" width="100" height="100" border="0" /></a> <a href="bottomright.html"><img src="bottomright.gif" width="100" height="100" border="0" /></a> Be careful to break the lines of the HTML inside the tags as shown in this code, to avoid introducing any spaces between the images. Also, keep in mind that the width and height attributes are optional, and are specified only to help web browsers lay out the page a bit quicker.