• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint



1:You have a 200×200-pixel image named quarters.gif for your Web page. When viewers click the top-left quarter of the image, you want them to get a page named toplft.htm. When they click the top-right quarter, they should get toprgt.htm. Clicking the bottom left should bring up btmlft.htm, and the bottom right should lead to btmrgt.htm. Write the HTML to implement this as a client-side imagemap.
<map name="quartersmap">

<area shape="rect" coords="0,0,99,99" href="toplft.htm" />
<area shape="rect" coords="100,0,199,99" href="toprgt.htm" />
<area shape="rect" coords="0,100,99,199" href="btmlft.htm" />
<area shape="rect" coords="100,100,199,199" href="btmrgt.htm" />
<img src="quarters.gif" width="200" height="200"
usemap="#quartersmap" />

2:If you want people using older browsers that don't support client-side imagemaps to get a page named oldies.htm when they click any part of the imagemap, how do you modify the HTML you wrote for question 1?
A2: Replace the <img /> tag with
<a href="oldies.htm">
<img src="quarters.gif width="200" height="200" ismap
usemap="#quartersmap" /></a>

3:How could you implement the effect described in question 1 without using imagemaps at all?
A3: Use a graphics program such as Paint Shop Pro to chop the image into four quarters and save them as separate images named toplft.gif, toprgt.gif, btmlft.gif, and btmrgt.gif. Then write this:
<a href="toplft.htm"><img src="toplft.gif"
width="100" height="100" border="0" /></a>
<a href="toprgt.htm"><img src="toprgt.gif"
width="100" height="100" border="0" /></a> <br />
<a href="btmlft.htm"><img src="btmlft.gif"
width="100" height="100" border="0" /></a>
<a href="btmrgt.htm"><img src="btmrgt.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.)


  • If you have some pages containing short lists of links, see whether you can cook up an interesting imagemap to use instead.

  • Imagemaps are usually more engaging and attractive than a row of repetitive-looking icons or buttons. Can you come up with a visual metaphor related to your site that would make it easier—and maybe more fun—for people to navigate through your pages? (Thinking along these lines is a good preparation for the issues you'll be tackling in Part VI, “Building a Web Site,” by the way.)



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint