ptg 434 Chapter 12 • Working with Images (and Links) 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). EXAMPLE 12.7 <html> <head><title>Preloading Images</title></head> <script type="text/javascript"> 1 ImageHome=new Array(3); 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"; 4 function myRandom(){ 5 var n=ImageHome.length - 1; 6 var randnum=Math.floor(Math.random() * (n + 1)); 7 document.images["display"].src = ImageHome[randnum].src; } </script> EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 12.3 Working with Imagemaps 435 </head> <body bgcolor="cornflowerblue"><center> <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> EXPLANATION 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. EXAMPLE 12.7 (CONTINUED) From the Library of WoweBook.Com ptg 436 Chapter 12 • Working with Images (and Links) 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. EXAMPLE 12.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="spring3.jpg"onclick= "this.href='JavaScript:void(0)';this.disable=true"> <area shape="rect" href="spring4.jpg"onclick= "this.href='JavaScript:void(0)';this.disable=true"> <area shape="rect" href="spring5.jpg" onclick= "this.href='JavaScript:void(0)';this.disable=true"> From the Library of WoweBook.Com ptg 12.3 Working with Imagemaps 437 <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> <div align="center"> <h2>Spring in San Francisco</h2> <img src="spring1.jpg" height=257 width=343 usemap="#my_image_map" /> <script type="text/javascript"> 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>"; 7 document.write(lstr); </script> </div> </body> </html> EXPLANATION 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 image. 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). EXAMPLE 12.8 (CONTINUED) From the Library of WoweBook.Com ptg 438 Chapter 12 • Working with Images (and Links) 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.” From the Library of WoweBook.Com ptg 12.4 Resizing an Image to Fit the Window 439 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. EXAMPLE 12.9 <html> <head> <title>Planet Earth</title> <script type="text/javascript"> 1 function alert_me(){ alert("This window's outer width is: " 2 +window.outerWidth+" and the outer height is: " +window.outerHeight); } 3 function resizeEarth() { 4 document.images["earth"].style.height = 5 (document.body.clientHeight - 75) * 0.9; } </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> EXPLANATION 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. From the Library of WoweBook.Com ptg 440 Chapter 12 • Working with Images (and Links) Figure 12.17 The image before changing the size of the window. Figure 12.18 After resizing the window and clicking the Refresh button. From the Library of WoweBook.Com ptg 12.5 Introduction to Slideshows 441 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). From the Library of WoweBook.Com . href="spring5.jpg"onclick= "this.href=&apos ;JavaScript: void(0)';this.disable=true"> <area shape="rect" href="spring2.jpg"onclick= "this.href=&apos ;JavaScript: void(0)';this.disable=true"> <area. "this.href=&apos ;JavaScript: void(0)';this.disable=true"> <area shape="rect" href="spring4.jpg"onclick= "this.href=&apos ;JavaScript: void(0)';this.disable=true"> <area. 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