Chapter 35. Creating Image Maps


Image maps are images that have one or more clickable regions called hotspots. Each hotspot acts as a separate link. The links can go to different pages or execute different scripts, which makes image maps more useful than regular old clickable graphics, where the entire image acts as a single link.

GEEKSPEAK

An image map is an image with one or more hotspots, or clickable regions.


In an image map, there's nothing special about the image file itself. You can start with any Web graphic. What turns the image into an image map is a block of HTML code that defines the shape, location, and function of the hotspots. So, an image map consists of two parts:

  1. The image file itself

  2. The block of code that defines the hotspots

TIP

Since the hotspots are in the HTML, not in the image itself, your image map becomes a regular old nonclickable image again if you separate the image from its code. Moving the image to another page without also moving the block of code that defines the hotspots renders the image map inert.


Put them together, and you have something like Figure 35.1. Notice that the img tag gets the usemap attribute, which tells the browser which map definition to apply. You can have as many image maps per page as you like, and you can even use the same definition for completely different images.

Listing 35.1. View Source for Figure 35.1.
 <img src="/books/2/30/1/html/2/images/mars.jpg" width="500" height="300" usemap="#mars"> <!-- Begin hotspot definitions --> <map name="mars">   <area shape="rect" coords="9,3,164,148" href="mars01.htm">   <area shape="rect" coords="172,2,328,149" href="mars02.htm">   <area shape="rect" coords="334,5,487,149" href="mars03.htm">   <area shape="rect" coords="9,151,163,294" href="mars04.htm">   <area shape="rect" coords="171,153,327,296" href="mars05.htm">   <area shape="rect" coords="334,152,488,295" href="mars06.htm"> </map> <!-- End hotspot definitions --> 

Figure 35.1. An image map consists of an image file and a block of HTML code that defines the hotspots.


TIP

You can put your map tags anywhere in the HTML, but the most convenient place for them is at the bottom of the HTML document. This way, you always know where to find your image-map definitions if you need to modify them or move them to another page.


The definition itself appears between the map tags. The name attribute of the map tag corresponds to the usemap attribute of the img tag, with the notable exception that the usemap attribute prefixes the name of the definition with a number sign (#), while the name attribute has no prefix.

FAQ

What about server-side image maps?

This topic describes client-side image maps, where the HTML code contains the hotspot definitions. There are also server-side image maps, where the hotspot definitions reside in a separate file on the Web server. Images with server-side definitions are less dependent on the browser and easier to move from page to page, since you don't have to worry about moving the block of HTML that defines the hotspots. But server-side image maps are more cumbersome to code. They don't perform as quickly as their client-side cousins, and you can't make them accessible.

While server-side image maps used to be the standard in the early days, they have all but disappeared, now that all the major browsers support client-side mapping.


Each hotspot in the image map gets its own area tag, so if you have six hotspots like the image map in Figure 35.1, you need six area tags. These area tags can appear in any order. As you might expect, the attributes of the area tag determine where and how the hotspot appears:

  • The shape attribute determines which of the three possible hotspot shapes you're using: rectangular (rect), circular (circle), or polygonal (poly).

  • The coords attribute determines the position and size of the hotspot. Depending on the value of the shape attribute, the values in the coords attribute have different meanings (see Table 35.1). The upper-left corner of any image is coordinate (0,0). The bottom-right corner of a 500-by-300 image is coordinate (500,300).

    Table 35.1. Meaning of Coords Attribute Values

    SHAPE

    NUMBER OF COORDS

    MEANING

    EXAMPLE

    circle

    Always 3

    x position of center point, y position of center point, radius of circle in pixels

    coords="10,12,20"

    poly

    At least 6, and always in multiples of 2

    x position of shape point, y position of shape point (repeat for as many shape points as you need to describe the polygon)

    coords="100,150,200,100,50,150" coords="275,50,300,150,350,100,400,150,450,50"

    rect

    Always 4

    x position of top-left corner, y position of top corner, x position of bottom-right corner of bottom-right corner, y position corner

    coords="0,0,100,150"


    TIP

    The name of the image map doesn't have to correspond to the name of the image file, but using the same name for both is a convenient way for you to keep track of which image map goes with which image.


  • The href attribute contains the hotspot's link. Its value can be a path to a new page, or it can open a blank email window (href="mailto:mars@email.eml"), or launch a script (href="javascript:doMars();").

TIP

Be careful that your hotspot areas don't overlap. When this happens, browsers get confused, and your image map probably won't work correctly.


So, if you want to make circular hotspots instead of rectangular ones for the image mars.jpg, you simply change the shape and update the coordinates:

 <img src="/books/2/30/1/html/2/images/mars.jpg" width="500" height="300" usemap="#mars"> <!-- Begin hotspot definitions --> <map name="mars">   <area shape="circle" coords="85,76,70" href="mars01.htm">   <area shape="circle" coords="245,76,70" href="mars02.htm">   <area shape="circle" coords="410,76,70" href="mars03.htm">   <area shape="circle" coords="85,225,70" href="mars04.htm">   <area shape="circle" coords="245,225,70" href="mars05.htm">   <area shape="circle" coords="410,225,70" href="mars06.htm"> </map> <!-- End hotspot definitions --> 

TIP

You can mix and match shapes in the same image map. Your hotspots don't all have to be the same shape.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net