|
|
| Client-side image maps are images that contain one of more hyperlinks as "hot spots" within an image. Images containing image maps are composed of two parts: the image and the image map.
|
|
|
| Just as a page can contain multiple images, a page can also contain multiple image maps. Image maps are identified by a user-defined name in order to distinguish one from another on a given page. Images using image maps must specify the exact name of the image map using the htmlImage::UseMap() method. An image map can be added anywhere to a page, regardless of where it's associated image appears. You can also use image maps that appear in other documents, not just within the document in which the image appears.
|
|
|
| Image maps are composed of areas representing URL's. The htmlArea class is used to define a set of coordinates defining an area of an image associated with a particular URL. To create an image map, one or more htmlArea objects are added to an htmlImageMap object.
|
|
|
| As previously mentioned, each image map object is identified by a unique name, specified using the htmlImageMap constructor or the Name() method.
|
|
|
| Three shapes exist for the set of coordinates in an htmlArea object defining an area:
|
| |
|
|
| These three shape types are defined in the ShapeType enumeration as shape_rectangle, shape_circle, and shape_polygon, respectively.
|
|
|
| Rectangle coordinates must be of the form "x1,y1, x2,y2", where x1,y1 are the coordinates of the upper left corner and x2,y2 are the coordinates of the lower left corner
|
|
|
| Circle coordinates must have the form "x,y,r", where x and y are coordinates of the center of the circle, and r is the length of the radius.
|
|
|
| Polygon coordinates must have the form "x1,y1, x2,y2 ... xn,yn", where each x,y pair is a point where two sides of the polygon meet. A polygon may have up to 100 sides.
|
|
|
| For example, the following code defines an area object encompassing a rectangle 100 pixels wide and 50 pixels tall in the top left corner of an image:
|
|
|
| htmlArea hotspot( "http://www.dcmicro.com",
|
| shape_rectangle,
|
| "0,0,100,50" ) ;
|
|
|
| You could define several such areas for an image. Once all areas are defined, add the htmlArea objects to an htmlImageMap object, giving the image map a unique name:
|
|
|
| htmlImageMap map( "mainmap" ) ;
|
| map << hotspot ;
|
|
|
| Once the image map is assembled, simply add it anywhere within the page containing the image. Use the htmlImage::UseMap() method reference the image map by name. You could also reference an image map in a completely different document URL.
|
|
|
| htmlImage image( "/images/logo.gif" ) ;
|
| image.UseMap( "mainmap" ) ;
|
| page << image
|
| << map ; // the image map must be
|
| // included in the page
|
|
|
| The above techniques closely resemble how image maps are created and associated using traditional HTML coding. However, the following two techniques take advantage of html++'s object oriented design to simplify the process. The first example creates an htmlImageMap object and adds it directly to the image object. The second example adds htmlArea objects directly with no intermediate htmlImageMap object (they're stored internally in the private htmlImageMap member object within htmlImage). Note how both examples do not name the image map, instead letting html++ generate a unique name on it's own:
|
|
|
| // Example one: Creating an image map of hotspot(s),
|
| // then adding the map to an image.
|
| htmlImage image( "/images/logo.gif" ) ;
|
| htmlImageMap map ;
|
| htmlArea hotspot( "http://www.dcmicro.com",
|
| shape_rectangle,
|
| "0,0,100,50" ) ;
|
| map << hotspot ;
|
| image << map ;
|
| page << image ;
|
| |
