Tự học HTML và CSS trong 1 giờ - part 28 pot

The center point of the circle is defined as the x,y coordinate from the upper-left corner of the image.. Bottom right 440,318 The and Tags If you’re creating your imagemap manually an

Trang 1

A circular region

A polygonal region

A rectangular region

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

Three types of

shapes are

avail-able for creating

imagemaps.

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 <map>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

Trang 2

(333,94)

(332,19) (276,19)

(263,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

9

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

y is down.

NOTE

FIGURE 9.26

Getting the

coordinates for

a polygon.

(0,0) Center (121,79)

Radius of circle=66 pixels

FIGURE 9.27

Getting the

coordi-nates for a circle.

Trang 3

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

Getting the

coordinates for

a rectangle.

Bottom right (440,318)

The <map> and <area> 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 <map>tag, which looks like the following:

<map name=“mapname”> coordinates and links </map>

The value assigned to the nameattribute 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 <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 theshapeattribute, which can

have the values rect,poly,circle, and default The coordinates for each shape are

Trang 4

noted using the coordsattribute For example, the coordsattribute for a polyshape

appears as follows:

<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 rectshapes, 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 circleshapes, x,y represents the center of a circular region of size radius:

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

Thedefaultshape is different from the others—it doesn’t require any coordinates to be

specified Instead, the link associated with the defaultshape 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 hrefattribute You can

assignhrefany URL you usually would associate with an <a>link, including relative

pathnames In addition, you can assign hrefa value of “nohref”to define regions of the

image that don’t contain links to a new page

9

If 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 HTML5 Earlier in this lesson, you learned

how to specify alternate text for images In HTML5, the altattribute 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 altattribute 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 usemapattribute

of the<img>tag is used The map name that you specified using the nameattribute of the

<map>tag, preceded by a #, should be used as the value of the usemapattribute, as shown

in this example:

NOTE

Trang 5

▼

The value assigned to usemap is a standard URL This is why map-namehas 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 mapnamein 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

NOTE

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.

Polygon

Circle Rectangle

Rectangle

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

9

Getting Image Coordinates from the Browser

You don’t have an image-editing program? If you use Firefox 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 displays 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

doc-uments and stored them inside the musicdirectory on my Web server These are the

pages you’ll define as the end points when the clickable images are selected Figure 9.31

identifies each of the eight clickable areas in the imagemap Table 9.1 shows the

coordi-nates of each and the URL that’s called up when it’s clicked

TABLE 9.1 Clickable Areas in the Jukebox Image

220,118,247,152 237,153,237,181 186,181,186,153 ,

Trang 7

TABLE 9.1 Continued

5 1

8 2

FIGURE 9.31

Eight hot spots,

numbered as

iden-tified in Table 9.1.

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”

alt=“Classical Music and Composers” />

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” />

Trang 8

<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:

<!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>

<body>

<div align=“center”>

<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>

<img src=“jukebox.gif” alt=“Juke Box” usemap=“#jukebox” />

<map name=“jukebox”>

href=“/music/classics.html”

alt=“Classical Music and Composers” />

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” />

9

Trang 9

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> |

<a href=“code/music/help.html”>Help</a>

</p>

</div>

</body>

</html>

Figure 9.32 shows the imagemap in a browser

FIGURE 9.32

The finished Really

Cool Music Page

with client-side

imagemap.

▲

Image Etiquette

There are great images on sites all over the Web: cool icons, great photographs, excellent

line art, and plenty of other graphics, too You might feel the temptation to link directly

to these images and include them on your own pages, or to save them to disk and then

use them There are a number of reasons why it’s wrong to do so

Trang 10

First, if you’re linking directly to images on another site, you’re stealing bandwidth from

that site Every time someone requests your page, they’ll also be issuing a request to the

site where the image is posted and downloading the image from there If you get a lot of

traffic, you can cause problems for the remote site

The second reason is actually a problem regardless of how you use images from other

sites If you don’t have permission to use an image on your site, you’re violating the

rights of the image’s creator Copyright law protects creative work from use without

per-mission, and it’s granted to every creative work automatically

The best course of action is to create your own images or look for images that are

explic-itly offered for free use by their creators Even if images are made available for your use,

you should download them and store them with your web pages rather than linking to

them directly Doing so prevents you from abusing the bandwidth of the person

provid-ing the images

Summary

In this lesson you learned to place images on your web pages Those images are

nor-mally in GIF, JPEG, or PNG format and should be small enough that they can be

down-loaded quickly over a slow link You also learned that the HTML tag <img>enables you

to put an image on a web page either inline with text or on a line by itself The <img>tag

has three primary attributes supported in standard HTML:

src The location and filename of the image to include

align How to position the image vertically with its surrounding

text align can have one of three values: top, middle, or bottom (deprecated from HTML5 in favor of style sheets).

alt A text string to substitute for the image in text-only browsers

You can include images inside a link tag (<a>) to treat them as links

In addition to the standard attributes, several other attributes to the <img>tag provide

greater control over images and layout on web pages You learned how to use these

HTML 3.2 attributes in this lesson, but they have been removed from HTML5 in favor of

style sheets They include the following:

align=“left” Places the image against the appropriate margin,

align=“right”, allowing all the following text to flow into the space alongside the image.

clear An extension to <br> that enables you to stop wrapping text

alongside an image clear can have three values: left, right, and all.

9

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