G.7. Creating and Using Image Maps

In Appendix F, we demonstrated how images can be used as hyperlinks to link to other resources on the Internet. In this section, we introduce another technique for image linking called image maps, which designates certain areas of an image (called hotspots) as links.[1] Figure G.7 introduces image maps and hotspots.

[1] Current Web browsers do not support XHTML 1.1 image maps. For this reason we are using XHTML 1.0 Transitional, an earlier W3C version of XHTML. In order to validate the code in Figure G.7 as XHTML 1.1, remove the # from the usemap attribute of the img tag (line 53).

Figure G.7. Image with links anchored to an image map.

 1  "1.0" ?>
 2  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml"> 9 10 11 Internet and WWW How to Program - Image Map 12 13 14 15 16 17

18 19 20 "picture"> 21 22 23 24 25 "form.html" shape = "rect" 26 coords = "2,123,54,143" 27 alt = "Go to the feedback form" /> 28 "contact.html" shape = "rect" 29 coords = "126,122,198,143" 30 alt = "Go to the contact page" /> 31 "main.html" shape = "rect" 32 coords = "3,7,61,25" alt = "Go to the homepage" /> 33 "links.html" shape = "rect" 34 coords = "168,5,197,25" 35 alt = "Go to the links page" /> 36 37 38 39 "poly" alt = "E-mail the Deitels" 40 coords = "162,25,154,39,158,54,169,51,183,39,161,26" 41 href = "mailto:deitel@deitel.com" /> 42 43 44 45 "mailto:deitel@deitel.com" 46 shape = "circle" coords = "100,36,33" 47 alt = "E-mail the Deitels" /> 48 49 50 51 52 "deitel.gif" width = "200" height = "144" 53 alt = "Deitel logo" usemap = "#picture" />

54 55 56

Lines 2048 define an image map by using a map element. Attribute id (line 20) identifies the image map. If id is omitted, the map cannot be referenced by an image (which we will see momentarily). Hotspots are defined with area elements (as shown in lines 2527). Attribute href (line 25) specifies the link's target (i.e., the resource to which to link). Attributes shape (line 25) and coords (line 26) specify the hotspot's shape and coordinates, respectively. Attribute alt (line 27) provides alternative text for the link.

Common Programming Error G 4

Not specifying an id attribute for a map element prevents an img element from using the map's area elements to define hotspots.


The markup in lines 2527 creates a rectangular hotspot (shape = "rect") for the coordinates specified in the coords attribute. A coordinate pair consists of two numbers representing the locations of a point on the x-axis and the y-axis, respectively. The x-axis extends horizontally and the y-axis extends vertically from the upper-left corner of the image. Every point on an image has a unique x-y-coordinate. For rectangular hotspots, the required coordinates are those of the upper-left and lower-right corners of the rectangle. In this case, the upper-left corner of the rectangle is located at 2 on the x-axis and 123 on the y-axis, annotated as (2, 123). The lower-right corner of the rectangle is at (54, 143). Coordinates are measured in pixels.

Common Programming Error G 5

Overlapping coordinates of an image map cause the browser to render the first hotspot it encounters for the area.


The map area at lines 3941 assigns the shape attribute "poly" to create a hotspot in the shape of a polygon using the coordinates in attribute coords. These coordinates represent each vertex, or corner, of the polygon. The browser connects these points with lines to form the hotspot's area.

The map area at lines 4547 assigns the shape attribute "circle" to create a circular hotspot. In this case, the coords attribute specifies the circle's center coordinates and the circle's radius, in pixels.

To use an image map with an img element, you must assign the img element's usemap attribute to the id of a map. Lines 5253 reference the image map "#picture". The image map is located within the same document, so internal linking is used.



    Introduction to Computers, the Internet and Visual C#

    Introduction to the Visual C# 2005 Express Edition IDE

    Introduction to C# Applications

    Introduction to Classes and Objects

    Control Statements: Part 1

    Control Statements: Part 2

    Methods: A Deeper Look


    Classes and Objects: A Deeper Look

    Object-Oriented Programming: Inheritance

    Polymorphism, Interfaces & Operator Overloading

    Exception Handling

    Graphical User Interface Concepts: Part 1

    Graphical User Interface Concepts: Part 2


    Strings, Characters and Regular Expressions

    Graphics and Multimedia

    Files and Streams

    Extensible Markup Language (XML)

    Database, SQL and ADO.NET

    ASP.NET 2.0, Web Forms and Web Controls

    Web Services

    Networking: Streams-Based Sockets and Datagrams

    Searching and Sorting

    Data Structures



    Appendix A. Operator Precedence Chart

    Appendix B. Number Systems

    Appendix C. Using the Visual Studio 2005 Debugger

    Appendix D. ASCII Character Set

    Appendix E. Unicode®

    Appendix F. Introduction to XHTML: Part 1

    Appendix G. Introduction to XHTML: Part 2

    Appendix H. HTML/XHTML Special Characters

    Appendix I. HTML/XHTML Colors

    Appendix J. ATM Case Study Code

    Appendix K. UML 2: Additional Diagram Types

    Appendix L. Simple Types


    Visual C# How to Program
    Visual C# 2005 How to Program (2nd Edition)
    ISBN: 0131525239
    EAN: 2147483647
    Year: 2004
    Pages: 600

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