Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P25 ppt

The center point of the circle is defined as the x,y coordinate from the upper-left corner of the image.. The and TagsIf you're creating your imagemap manually and you've written down

Trang 1

The 0,0 origin is in the upper-left corner of the image, and positive y is down

Defining a Circle

Figure 7.22 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 7.22 Getting the coordinates for a circle.

Trang 2

Defining a Rectangle

Figure 7.23 shows how to obtain coordinates for rectangle regions Note the x,y coordinates for the upper-left and lower-right corners of the rectangle

Figure 7.23 Getting the coordinates for a rectangle.

Trang 3

The <map> and <area> Tags

If you're creating your imagemap manually and you've written down all of 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 <map> tag, which looks like the following:

<map name="mapname"> coordinates and links </map>

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 coordinates and hyperlink references

So, if you have multiple imagemaps on the same page, you can have multiple <map> tags with different names

Between the <map> and the </map> 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 <area> tag To define a rectangle, for example, you would write the following:

<area shape="rect" coords="41,16,101,32" href="test.html">

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 noted using the coords attribute For example, the coords attribute for a poly shape appears as follows:

Trang 4

<area shape="poly" coords="x1,y1,x2,y2,x3,y3, ,xN,yN" href="URL">

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:

<area shape="rect" coords="x1,y1,x2,y2" href="URL">

For circle shapes, x,y represents the center of a circular region of size radius:

<area shape="circle" coords="x,y,radius" href="URL">

The default shape is different from the othersit 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 <area> tag is the href attribute You can assign href any URL you usually would associate with an <a> 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

When you're using client-side imagemaps with frames, you can include the target attribute

inside an <area> tag to open a new page in a specific window, as in this example:

<area shape="rect" coords="x1,y1,x2,y2" href="URL" target=

"window_name">

You need to include one more attribute in HTML 4.01 Earlier in this lesson, you learned how to specify alternate text for images In HTML 4.01, the alt attribute is an additional requirement for the <area> tag that displays a short description of a clickable area on a client-side imagemap when you pass your cursor over it Using the <area> example that I cited, the alt attribute appears as shown in the following example:

The usemap Attribute

After you've created your <map> tag and defined the regions of your image using <area> tags, the next step is to associate the map with the image To do so, the usemap attribute of the <img> tag is used The map name that you specified using the name attribute of the <map> tag, preceded by a #, should be used

as the value of the usemap attribute, as shown in this example:

<img src="image.gif" usemap="#mapname">

Trang 5

The value assigned to usemap is a standard URL This is why mapname 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 very complex

imagemap, however, you can store it in a separate HTML file and reference it using a

standard URL

Task: Exercise 7.3 A Clickable Jukebox

Let's take a look at how to create a client-side imagemap for a real image In this example, you'll define clickable regions on an image of a jukebox The image you'll be using appears

in Figure 7.24

Figure 7.24 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 7.25 shows regions on the image

Figure 7.25 The jukebox with areas defined.

Trang 6

Now that you know where the various regions are, you need to find the exact coordinates

of the areas as they appear in your image You can use a mapping program like Mapedit, or you can do it manually If you try it manually, it's helpful to keep in mind that most image-editing programs display the x and y coordinate of the image when you move the mouse over it

Getting Image Coordinates from the Browser

You don't have an image-editing program? If you use Netscape as your

browser, here's a trick: Create an HTML file with the image inside a link

pointing to a fake file, and include the ismap attribute inside the <img> tag You

don't need a real link; anything will do The HTML code might look something

like the following:

When you load this into your browser, the image is displayed as if it were an

imagemap When you move your mouse over it, the x and y coordinates

appear in the status line of the browser Using this trick, you can find the

coordinates for the map file of any point on that image

With regions and a list of coordinates, all you need are the web pages to jump to when the appropriate area is selected These can be documents, scripts, or anything else you can call from a browser as a jump destination For this example, I've created several documents and stored them inside the music directory on my web server These are the pages you'll define as the end points when the clickable images are selected Figure 7.26 identifies each

of the eight clickable areas in the imagemap Table 7.2 shows the coordinates of each and

Trang 7

the URL that's called up when it's clicked.

Table 7.2 Clickable Areas in the Jukebox Image

237,153,237,181 186,181,186,153

8 circle music/help.html 379,152,21

For the jukebox image, the <map> tag and its associated <area> tags and attributes look like the following:

<map name="jukebox">

<area shape="rect" coords="101,113, 165,134"

href="/music/classics.html"

Trang 8

href="/music/country.html"

alt="Country and Folk Music" />

href="/music/rockpop.html"

alt="Rock and Pop from 50's On" />

<area shape="poly" coords="175,152, 203,118, 220,118, 247,152,

237,153, 237,181, 186,181, 186,153"

href="code/music/home.html"

alt="Home Page for Music Section" />

href="/music/swing.html"

alt="Swing and Big Band Music" />

href="/music/jazz.html"

alt="Jazz and Free Style" />

href="/music/gospel.html"

alt="Gospel and Inspirational Music" />

<area shape="circle" coords="379,152, 21"

href="/music/help.html"

alt="Help" />

</map>

The <img> tag that refers to the map coordinates uses usemap, as follows:

<img src="jukebox.gif" usemap="#jukebox">

Finally, put the whole thing together and test it Here's a sample HTML file for The Really Cool Music Page with a client-side imagemap, which contains both the <map> tag and the image that uses it:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>The Really Cool Music Page</title>

</head>

<h1>The Really Cool Music Page</h1>

<p>Select the type of music you want to hear.<br />

You'll go to a list of songs that you can select from.</p>

<p>

<area shape="rect" coords="101,113, 165,134"

href="/music/classics.html"

alt="Classical Music and Composers" />

href="/music/country.html"

alt="Country and Folk Music" />

Trang 9

href="/music/rockpop.html"

alt="Rock and Pop from 50's On" />

<area shape="poly" coords="175,152, 203,118, 220,118, 247,152,

237,153, 237,181, 186,181, 186,153"

href="code/music/home.html"

alt="Home Page for Music Section" />

href="/music/swing.html"

alt="Swing and Big Band Music" />

href="/music/jazz.html"

alt="Jazz and Free Style" />

href="/music/gospel.html"

alt="Gospel and Inspirational Music" />

<area shape="circle" coords="379,152, 21"

href="/music/help.html"

alt="Help" />

</map></p>

<p>

<a href="code/music/home.html">Home</a> |

<a href="code/music/classics.html">Classics</a> |

<a href="code/music/country.html">Country</a> |

<a href="code/music/rockpop.html">Rock/Pop</a> |

<a href="code/music/swing.html">Swing</a> |

<a href="code/music/jazz.html">Jazz</a> |

<a href="code/music/gospel.html">Gospel</a> |

</p>

</div>

</body>

</html>

Figure 7.27 shows the imagemap in a browser

Output

Figure 7.27 The finished Really Cool Music Page with client-side

imagemap.

[View full size image]

Định dạng
Số trang	10
Dung lượng	230,59 KB