Xem mẫu

246 LESSON 9: Adding Images, Color, and Backgrounds The Mapedit program for Windows, Linux, and the Mac OS can help you create client-side imagemaps. You can find it online at http://www.boutell.com/mapedit/. In addition, many of the latest WYSIWYG editors for HTML pages and Web graphics enable you to generate imagemaps. There’s a Web-based editor for imagemaps that you can try out at http://www.image-maps.com/; it creates both imagemaps and the CSS equivalents. If you must create your imagemaps by hand, here’s how. First, make a sketch of the regions that will be active on your image. Figure 9.25 shows the three types of shapes that you can specify in an imagemap: circles, rectangles, and polygons. FIGURE 9.25 A polygonal region Three types of shapes are avail-able for creating imagemaps. A circular region A rectangular region You next need to determine the coordinates for the endpoints of those regions. Most image-editing programs have an option that displays the coordinates of the current mouse position. Use this feature to note the appropriate coordinates. (All the mapping programs mentioned previously will create the tag for you, but for now, following the steps manually will help you better understand the processes involved.) Defining a Polygon Figure 9.26 shows the x,y coordinates of a polygon region. These values are based on their positions from the upper-left corner of the image, which is coordinate 0,0. The first number in the coordinate pair indicates the x value and defines the number of pixels from the extreme left of the image. The second number in the pair indicates the y mea-surement and defines the number of pixels from the top of the image. Download from www.wowebook.com What Is an Imagemap? 247 NOTE The 0,0 origin is in the upper-left corner of the image, and positive y is down. FIGURE 9.26 Getting the (0,0) coordinates for a polygon. (276,19) (229,66) (332,19) 9 (263,94)(333,94) Defining a Circle Figure 9.27 shows how to get the coordinates for circles. Here you note the coordinates for the center point of the circle and the radius, in pixels. The center point of the circle is defined as the x,y coordinate from the upper-left corner of the image. FIGURE 9.27 (0,0) Center (121,79) Getting the coordi- nates for a circle. Radius of circle=66 pixels Download from www.wowebook.com 248 LESSON 9: Adding Images, Color, and Backgrounds Defining a Rectangle Figure 9.28 shows how to obtain coordinates for rectangle regions. Note the x,y coordi-nates for the upper-left and lower-right corners of the rectangle. FIGURE 9.28 (0,0) Top Left (342,19) Getting the coordinates for a rectangle. Bottom right (440,318) The and Tags If you’re creating your imagemap manually and you’ve written down all the coordinates for your regions and the URLs they’ll point to, you can include this information in the client-side imagemap tags on a web page. To include a client-side imagemap inside an HTML document, use the tag, which looks like the following: coordinates and links The value assigned to the name attribute is the name of this map definition. This is the name that will be used later to associate the clickable image with its corresponding coor-dinates and hyperlink references. So, if you have multiple imagemaps on the same page, you can have multiple tags with different names. Between the and the tags, enter the coordinates for each area in the imagemap and the destinations of those regions. The coordinates are defined inside yet another new tag: the tag. To define a rectangle, for example, you would write the following: The type of shape to be used for the region is declared by the shape attribute, which can have the values rect, poly, circle, and default. The coordinates for each shape are Download from www.wowebook.com What Is an Imagemap? 249 noted using the coords attribute. For example, the coords attribute for a poly shape appears as follows: Each x,y combination represents a point on the polygon. For rect shapes, x1,y1 is the upper-left corner of the rectangle, and x2,y2 is the lower-right corner: For circle shapes, x,y represents the center of a circular region of size radius: 9 The default shape is different from the others—it doesn’t require any coordinates to be specified. Instead, the link associated with the default shape is followed if the user clicks anywhere on the image that doesn’t fall within another defined region. Another attribute you need to define for each tag is the href attribute. You can assign href any URL you usually would associate with an link, including relative pathnames. In addition, you can assign href a value of “nohref” to define regions of the image that don’t contain links to a new page. NOTE If you’re using client-side imagemaps with frames, you can include the target attribute inside an tag to open a new page in a specific window, as in this example: You need to include one more attribute in HTML5. Earlier in this lesson, you learned how to specify alternate text for images. In HTML5, the alt attribute is an additional requirement for the tag that displays a short description of a clickable area on a client-side imagemap when you pass your cursor over it. Using the example that I cited, the alt attribute appears as shown in the following example: “test The usemap Attribute After you’ve created your tag and defined the regions of your image using tags, the next step is to associate the map with the image. To do so, the usemap attribute of the tag is used. The map name that you specified using the name attribute of the tag, preceded by a #, should be used as the value of the usemap attribute, as shown in this example: Download from www.wowebook.com 250 LESSON 9: Adding Images, Color, and Backgrounds NOTE The value assigned to usemap is a standard URL. This is why map-name has a pound symbol (#) in front of it. As with links to anchors inside a web page, the pound symbol tells the browser to look for mapname in the current web page. If you have a complex imagemap, however, you can store it in a separate HTML file and reference it using a standard URL. Task: Exercise 9.3: A Clickable Jukebox Let’s take a look at how to create a client-side imagemap for a real image. In this exam-ple, you define clickable regions on an image of a jukebox. The image you use appears in Figure 9.29. FIGURE 9.29 The jukebox image. First, define the regions that will be clickable on this image. There are six rectangular buttons with musical categories on them, a center area that looks like a house, and a circle with a question mark inside it. Figure 9.30 shows regions on the image. FIGURE 9.30 The jukebox with areas defined. Circle Rectangle Rectangle Polygon Download from www.wowebook.com ... - tailieumienphi.vn
nguon tai.lieu . vn