Học JavaScript qua ví dụ part 47 pptx

Example 12.7 demonstrates how to change the src attri-bute of an image object by using a random number as the index of an element in an image array.. 2 The Image constructor will prelo

Trang 1

12.3.3 Randomly Displaying Images and the onClick Event

By using the Math object’s random() method, it is sometimes fun to randomly generate

pictures from a list of images Example 12.7 demonstrates how to change the src

attri-bute of an image object by using a random number as the index of an element in an

image array All of the images are preloaded by using the Image() constructor, greatly

improving the time it takes to load the images

8 When the mouse is moved away from the link, the initial image baby1.jpg will

re-appear on the screen

9 The initial external image called baby1.jpg is named willy and is aligned on the left

side of the screen The output is shown in Figure 12.13

Figure 12.13 Before the mouse rolls over the image (left), as the mouse hovers over

the image (middle), and when the mouse moves away from the image (right).

E X A M P L E 1 2 7

<html>

<head><title>Preloading Images</title></head>

2 for(var i=0; i<3; i++){

ImageHome[i]=new Image();

}

3 ImageHome[0].src="baby1.jpg";

ImageHome[1].src="baby2.jpg";

ImageHome[2].src="baby3.jpg";

6 var randnum=Math.floor(Math.random() * (n + 1));

7 document.images["display"].src = ImageHome[randnum].src;

}

</script>

Trang 2

</head>

<h2>  This Is Baby William</h2>

8 <img name="display" id="display"

src="baby.jpg"

border=5 width="200" height="250" />

<p>

<form>

9 <input type="button"

value="Click Here for Baby Picture"

10 onClick="myRandom()" />

</form>

</center>

</body>

</html>

E X P L A N A T I O N

1 The Array() constructor creates an array object to consist of three elements This

array will be used to hold three images

2 The Image() constructor will preload and cache three images and assign them to

the array created in line 1

3 The src property of the first element of the image array is assigned an image called

baby1.jpg Each array element is assigned a different image.

4 The function called myRandom() is defined It produces a random number that

will be used as the index into the image array, causing a random picture to be

dis-played on the screen

5 The variable called n is assigned the value of the length of the image array minus 1.

6 The variable called randnum is assigned a random whole number between 1 and

3, the value returned from the Math object’s random method.

7 Instead of using a number to access the image array, a string is used The string is

the name given to the HTML image defined on line 8 This is the image that

ini-tially appears in the browser window In the JavaScript tree, this image is

repre-sented as document.images[0].src or document.display.src or

document.images[“dis-play”].src Either way, this image will be replaced with the value of the image in

the array ImageHome[randnum].src.

8 The inline image, called baby.jpg is displayed on the screen when the program

starts It is named display.

9 This form input type creates a button on the screen

10 When the user clicks the button, the onClick event is fired up, and the event is

handled by calling myRandom(), which displays a random image See Figure

12.14

E X A M P L E 1 2 7 (C O N T I N U E D)

Trang 3

12.3.4 Links with an Image Map and JavaScript

You might want to associate more than one link with an image This can be done by

using an HTML image map The image map is used to list the links associated with the

image and an event handler will activate some action when the user clicks the link or

rolls the mouse over it, and so on In Example 12.8, an image map is created with a

num-ber of links associated with an original image entitled “Spring in San Francisco.” When

JavaScript handles the page, it creates a links array where each element of the array is a

link in the order in which it was placed in the document There is an onClick event

han-dler associated with each link When the user clicks on a link, he or she is redirected to

another image of “Spring in San Francisco” (see

http://www.tutorialspoint.com/java-scritpt/javascript_image_map.htm).

Figure 12.14 Each time the user clicks the button, a random picture is displayed.

E X A M P L E 1 2 8

<html>

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

1 <map name="my_image_map">

2 <area shape="rect" href="spring5.jpg"onclick=

"this.href='JavaScript:void(0)';this.disable=true">

<area shape="rect" href="spring2.jpg"onclick=

"this.href='JavaScript:void(0)';this.disable=true">

<area shape="rect" href="spring5.jpg" onclick=

Trang 4

<area shape="rect" href="spring6.jpg" onclick=

"this.href='JavaScript:void(0)';this.disable=true" />

3 <area shape="default" href="spring1.jpg" />

</map>

</head>

<body>

<h2>Spring in San Francisco</h2>

<img src="spring1.jpg" height=257 width=343 usemap="#my_image_map" />

4 var lstr = "<ul>"; // tag to create a bulleted list

var len = document.links.length - 1;

5 for ( var i = 1; i < len; i++ ){ // Create links

lstr += "<li><a href=" + document.links[i].href;

lstr += ">spring" + i +" </a>\n";

}

6 lstr += "</ul>";

</script>

</div>

</body>

</html>

1 The image map starts here It can be used to allow multiple links to be associated

with one image For each HTML hyperlink created in the document, JavaScript

creates a corresponding links array, the first link being links[0].

2 The links are deactivated to prevent the user from being surprised if he or she

clicks on one of the images The disabled property of JavaScript is a Boolean

prop-erty; it can take two possible values: true, or false The image map is used to create

links, shown under the picture, so that the user can click on one of the links and

be redirected to another image The image map makes it possible to have one

im-age with multiple links, rather than a single link with a single imim-age Because

there will be no “hotspots” in this image, there is no need to use coordinates (see

Figure 12.15)

3 This is the image that is displayed on the screen

4 The string lstr will contain a bulleted list of each hyperlink in the links array

5 The for loop will cycle until all the links have been assigned to lstr JavaScript

makes use of the href property of the link object to create the string.

6 The string of bulleted list items is completed with a closing </ul> tag.

7 When the list is displayed, it will consist of links to images associated with the

one originally displayed; that is, more images of spring in San Francisco (see

Figure 12.16)

E X A M P L E 1 2 8 (C O N T I N U E D)

Trang 5

12.4 Resizing an Image to Fit the Window

If you resize a window and the image remains the same size, you might want to resize

the image as well so that it is proportional to the window; that is, as the window gets

bigger or smaller, so does the image By using the onLoad event handler, each time the

page loads, a function will be called to reset the dimensions of the image, but to see the

change, you will have to refresh the page

Figure 12.15 Creating links with JavaScript and an image map.

Figure 12.16 Thumbnails of pictures in the image map for “Spring in San Francisco.”

Trang 6

Because the image size will be based on the height and width of the client’s window, it

is better to base the size of the image on the height of the window rather than the width,

as vertical positioning is less flexible in most browsers The width of the image will be

scaled automatically as long at the browser knows its height Example 12.9 demonstrates

how to resize the window and to see its actual dimensions once it has been resized

E X A M P L E 1 2 9

<html>

<head>

<title>Planet Earth</title>

alert("This window's outer width is: "

2 +window.outerWidth+" and the outer height is: "

+window.outerHeight);

}

4 document.images["earth"].style.height =

}

</script>

</head>

6 <body onload="resizeEarth();">

7 <div style="margin-top:75px; text-align:center">

<img name="earth"

src="http://recycle4acause.files.wordpress.com/2009/12/earth.jpg"

alt="earth"images/Earth.jpg" alt="earth picture"

onclick="alert_me();"/>

</div>

</body>

</html>

1 This is a test to find the dimensions of the window’s dimensions before resizing it

2 The properties of the window object are used to get the height and width of the

window

3 If the user resizes his browser window, this function will scale the image down to

be proportional to the size of the screen

4 The style property of the object will be used to resize the height of the image

Be-cause the image was initially given a margin of 75 pixels from the top of the page,

75 is subtracted from the total height of the browser window (clientHeight - 75),

and multiplied by 90 percent

5, 6 Now resize your browser window manually The image will not be proportioned

properly, but if you refresh/reload the page, the onLoad event handler is triggered

and the resizeEarth() function will be called.

7 This style for the image of the earth is defined If the user clicks the image, a

func-tion called alert_me() will be called to display the window dimensions in an alert

dialog box The results are shown in Figures 12.17, 12.18, and 12.19

Trang 7

Figure 12.17 The image before changing the size of the window.

Figure 12.18 After resizing the window and clicking the Refresh button.

Trang 8

12.5 Introduction to Slideshows

JavaScript slide shows are great for creating photo albums, auction listings, digital

pre-sentations, art galleries, 3D carousels, and so on (see Figure 12.20) Once you get a basic

slide show working, you can reuse the code to create other slide shows and change the

images accordingly There are numerous sites on the Web where you can get excellent

JavaScript slideshow libraries that have already been created and free for reuse The

examples provided in this text are to give you some insight on how a simple JavaScript

Figure 12.19 After clicking on the image, this alert box displays the window’s

dimensions.

Figure 12.20 A carousel slideshow

(http://www.dynamicdrive.com/dynamicindex14/carousel.htm).

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