Học JavaScript qua ví dụ part 44 pot

12.1.2 The JavaScript image Object With the Legacy DOM, JavaScript provided the image object as a property of the docu-ment object, giving you easy access to the images that have been l

Trang 1

413

12

Working with Images

(and Links)

12.1 Introduction to Images

A picture is worth a thousand words Whether it’s a slide show, banner, movie, or photo

album, the Web contains a huge collection of images Any time you buy something

online, there is usually an image associated with the item, maybe a small image, and then

a bigger image if you want more detail Whatever it is, a book, a house, a pair of shoes,

or a toy, we like to see it before we put it in our virtual shopping cart and pay the money

Although the focus of this chapter is on JavaScript and images, hypertext links are so

closely intertwined with images and navigation, they are also discussed here

Images can be links, clickable image maps, banners, marquees, billboards, or

roll-overs—you name it With HTML, the images you load are static, and just sit on the page

They cannot be changed without loading a brand new page, and loading a lot of images

takes time JavaScript brings a new dimension to working with images Instead of

view-ing a static image on the page, you can create dynamic images that can be changed on

the fly, adding animation and drama to your Web page For example, you can create

effects such rollovers, slide shows, cycling banners, dynamic menus, and more Just as

with forms, JavaScript has access to every image on you page Before getting into the fun

of images, we will look at how JavaScript accesses them In Chapter 13, “Handling

Events,” and Chapter 15, “The W3C DOM and JavaScript,” you utilize what you learn

here to see the full potential of image manipulation with JavaScript

Trang 2

12.1.1 HTML Review of Images

Before using images with JavaScript, the following section reviews the basics of using

images in a static Web page Table 12.1 lists HTML image tags

Table 12.1 HTML Image Tags

Tag Attributes Description

IMG Starting tag for loading an image.

ALIGN Floats the image either to the left or right side of the page, or aligns

the image with text in directions, texttop, top, middle, absmiddle,

bottom, or absbottom.

ALT Alternative text in case the image doesn’t appear.

BORDER The width in pixels of an image border.

HEIGHT Height of the image in pixels.

HSPACE Adds space, in pixels, to both the right and left sides of the image.

SRC Contains the URL, location of the image relative to the document root

of the Web page.

VSPACE Adds space, in pixels, to both the top and bottom of the image

WIDTH Width of the image in pixels

MAP Starting tag for an image map Image maps link areas of an image with

a set of URLs Clicking on an area of the map sends the user to that page.

ID The name of the image map.

NAME Also the name of the image map.

AREA Defines the clickable areas of the image map.

ALT Describes what happens when the user clicks.

COORDS Determines the shape of a rectangle, circle, or polygon in x,y pixel

coordinates.

HREF The address of the page that will appear when the user clicks in a

particular area.

SHAPE Assigned a type, where type represents the shape of the area.

Trang 3

Using an Image in an HTML Web Page. Example 12.1 is an HTML file linked to

an image In this example, we review the way inline images are created in a document

E X A M P L E 1 2 1

<html>

<head><title>HTML Images</title></head>

1 <img src="baby.jpg" alt="baby" border=2 align="left"

2 hspace="10" width="220" height="250" />

3 <pre>

Father calls me William, sister calls me Will, Mother calls me Willie, but the fellers call me Bill!

Mighty glad I ain't a girl ruther be a boy, Without them sashes, curls, an' things that's worn by Fauntleroy!

Love to chawnk green apples an' go swimmin' in the lake Hate to take the castor-ile

they give for belly-ache!

Most all the time, the whole year round, there ain't no flies on me,

But jest 'fore Christmas I'm as good as I kin be!

</pre>

</body>

</html>

Eugene Field, Jest ‘Fore Christmas, in Childcraft, Vol 2, (Chicago:

Field Enterprises, Inc., 1949).

E X P L A N A T I O N

1 The image src attribute defines where the image is located This image, baby.jpg,

is located where the HTML file called image.html is found, normally under the

document root of your browser If the image can’t be loaded, the alt attribute

spec-ifies text that will appear in its place The image will be aligned at the left side of

the page and will have a thin black border around it There will be 10 pixels of

space on both the left and right sides of the image This keeps the text from

jam-ming up too close to the picture

2 The width and height attributes of the img tag allow you to specify the size of your

image in pixels If you right-click on an image (Windows), a popup window will

appear where you can select Properties to obtain info about your image

3 This is a <pre> tag that is followed by all the text that appears at the right side of

the image See Figure 12.1

Trang 4

12.1.2 The JavaScript image Object

With the Legacy DOM, JavaScript provided the image object as a property of the

docu-ment object, giving you easy access to the images that have been loaded into a docudocu-ment

Although you can use the W3C versions of the DOM, the Legacy DOM is supported by

all modern browsers and is commonly used when working with images Just like the

form object, the image object corresponds to the HTML <img> tag and each image is

assigned to the images[] array1 in the order in which the image appears within the

doc-ument The first image would be represented as docdoc-ument.images[0], the next as

docu-ment.images[1], and so on (see Figure 12.2) As with forms, images can also be named

and given an id The properties for the image object correspond to the HTML attributes

of the <img> tag, such as src, width, height, border, vspace, and hspace, and are shown in

Table 12.2.2 It is possible to assign values to these properties to dynamically change the

size, shape, and border of the image There are no common methods for the image object

unless you use the id attribute and methods such as getElementById() and

getElements-ByTagName() provided by the W3C DOM

JavaScript also provides event handlers that are triggered when an image is loaded, a

mouse crosses the image, or when the user clicks on an image Although we use event

handling in this chapter, Chapter 13 provides a more complete discussion

Figure 12.1 Using images in an HTML page: Output from Example 12.1.

1 Implemented starting in JavaScript 1.1.

2 These properties are common to both Mozilla/Firefox and Internet Explorer Internet Explorer, however,

supports many more than those listed here.

Trang 5

For preloading offscreen images, JavaScript provides an image constructor (see

Example 12.6) The constructor is used if you have large images that will take time to

download or images that are being replaced dynamically within the page The images are

preloaded into memory (but not displayed) and available from the cache when the user

requests them, thus making the response time much faster (see Example 12.4)

12.2 Reviewing Links

Links are fundamental to the Web They are primarily used to navigate you from page

to page We have been using links in many examples so far There are a number of ways

to execute JavaScript from a link such as navigating to another page, opening a link in

Figure 12.2 Document object and images.

Table 12.2 image Object Properties

Property HTML <img>

Attribute

Description

border border An integer value determining the width of an image border in pixels.

complete A Boolean value returning true if Navigator has finished

downloading the image.

height height An integer representing the height of the image in pixels.

hspace hspace An integer representing the horizontal space (pixels) around the

image.

lowsrc lowsrc Specifies an optional image to display for a low-resolution device.

name name A string containing the name of the image.

prototype Used to add user-specified properties to an image object.

src src A string containing the path and name of the image

vspace vspace An integer representing the vertical space (pixels) around the image.

width width An integer representing the width of the image in pixels.

images[0] images[1] images[ ]

window

document

Trang 6

a popup window, calling a function from a link, submitting a form from a link, and so

on This chapter focuses on how links are used with images

As you know, HTML hypertext links are usually created by assigning a Web address

or a file name to the HTML <a href> tag, for example:

If a JavaScript function is assigned to the <a href> tag, when the user clicks the link,

the function will be executed (see Example 12.4)

<a href="JavaScript:greetings()"><big>Click here for salutations</big>

<a href="JavaScript: function_name(arguments);"> Do Something </a>

And you can use an event handler with a link (see Chapter 13):

<a href="newpage.htm" onClick="newwindow();return false">Click Here!</A>

12.2.1 The JavaScript links Object

Like the form object and image object, the link object is a property of the document

object and gives you access to the hypertext links that have been loaded into a document

(see Figure 12.3) It corresponds to the HTML <a href> tag As each HTML form is a

Java-Script element of the forms[] array, and each image is assigned to the images[] array, so

each link is assigned to the links[] array in the order in which the link appears within

the document

The first link would be represented as document.links[0] The properties for the links

object are shown in Tables 12.3 and 12.4.3 There are no common methods for the links

object

Figure 12.3 Document object and links

3 These properties are common to both Netscape and Internet Explorer Internet Explorer, however,

sup-ports many more than are listed here.

links[0] links[1] links[ ]

window

document

Trang 7

A links object contains a URL, similar to the window’s location object, and shares the

same properties A full URL takes the following form:

<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]

There are nine events that can be triggered by a link: onClick, onDblClick,

onKey-Down, onKeyPress, onKeyUp, onMouseonKey-Down, onMouseUp, onMouseOver, and

onMouse-Out (For details, see Chapter 13.)

Table 12.3 Properties of the W3C links Object

Property What It Describes

charset Sets or returns the character encoding of the target URL.

disabled Sets or returns whether or not the target URL should be disabled.

href The entire URL.

hreflang Sets or returns the base language of the target URL.

id Sets or returns the id of a <link> element.

media Sets or returns on what device the document will be displayed.

name The name of the <link> element.

rel Sets or returns the relationship between the current document and the

target URL.

rev Sets or returns the relationship between the target URL and the current

document.

Table 12.4 Properties of the JavaScript links Object

hash The anchor part of the URL (if any).

host The hostname port part of the URL.

hostname The hostname part of the URL.

href The entire URL.

pathname The pathname part of the URL.

port The port part of the URL.

Continues

Trang 8

protocol The protocol part of the URL, including the colon.

search The query part of the URL.

target The HTML target attribute of the link.

E X A M P L E 1 2 2

<html>

<title>Using Links </title></head>

<body>

<h2>Links and their Properties</h2>

<big>

1 <a href="http://search.yahoo.com/bin/search?p=JavaScript

tutorial">

Search for JavaScript Stuff</a>

2 <a href="http://google.com?" >Go to google</a>

3 <a href="http://www.bing.com">Go to bing</a>

document.write(" This document contains "

+document.links.length + " links. ");

4 for (i = 0; i< document.links.length; i++){

5 document.write("document.links["+i+"]: ");

5 document.write("hostname: "

+document.links[i].hostname +" ");

6 document.write("href: "

+document.links[i].href +" ");

7 document.write("pathname:"

+document.links[i].pathname +" ");

8 document.write("port: "

+document.links[i].port +" ");

9 document.write("query string: "

+document.links[i].search +" ");

10 document.write("protocol: "

+document.links[i].protocol +" ");

}

</script>

</big>

</body>

</html>

Table 12.4 Properties of the JavaScript links Object (continued)

Trang 9

E X P L A N A T I O N

1 This link goes to the Yahoo! search engine’s main site and searches for the word

“JavaScript tutorial.” Note: The browser inserted a %20 for the space between

“JavaScript”and “tutorial”, an example of URL encoding

2 This link goes to the Google search engine’s main site

3 This link goes to the Bing search engine’s main site

4 The size of the links[] array is determined by the length property It displays the

number of links in the document

5–10 The for loop is used to iterate through the links array and display some of its

prop-erties The output is shown in Figures 12.4 and 12.5

Figure 12.4 Viewing the properties of the links object.

Trang 10

12.3 Working with Imagemaps

An imagemap is an image with clickable areas where each area is represented by a link,

also called a hotspot An imagemap makes it possible to make one image link to several

pages depending on the area or pixel coordinate positions clicked by the user A simple

example would be an image of the map of the United States If the user clicks on Maine,

for example, then a link would navigate the user to another page with information about

that state, a closer image of the state, and so forth

In the HTML page you simply specify the area of the image (hotspot) and the link

that will be associated with that part of the image The most time-consuming and boring

part of this process is determining the coordinate positions for the hotspot This can be

done manually or by an image mapping program There are a number of programs on

the Web to help you (see Figure 12.6), and many are free In fact, most HTML editors

have image mapping as a built-in function (see Figures 12.7 and 12.8)

Figure 12.5 After clicking on a hyperlink: Output from Example 12.2.

Định dạng
Số trang	10
Dung lượng	1,46 MB