ptg 474 Chapter 13 • Handling Events 13.4 Handling Mouse Events In many previous examples, we’ve seen uses of the onClick event handler to initiate an action when a user clicks the mouse in a button or on a link. There are a number of other events that can be fired due some action of the mouse. When the user moves the mouse pointer over a link, image, or other object, the onMouseOver event handler is triggered, and when he or she moves the mouse pointer away from an object, the onMouseOut event is trig- gered. Table 13.4 lists events that are triggered when mouse movement is detected. Figure 13.9 Window was resized manually by the user. The onResize event handler was triggered. Table 13.4 Mouse Events Event Handler When It Is Triggered onClick When the mouse is clicked on a link and on form objects like button, submit. onDblClick When the mouse is double-clicked on a link, document, form object, image. onMouseDown When the mouse is pressed on a link, document. onMouseMove When the mouse is moved when it is over a link, form object, or most elements. onMouseOut When a mouse is moved out of a link, imagemap. onMouseOver When a mouse is moved over or enters a link, imagemap, or most elements. onMouseUp When the mouse is released from a link, document. From the Library of WoweBook.Com ptg 13.4 Handling Mouse Events 475 13.4.1 How to Use Mouse Events The onMouseOver and onMouseOut event handlers occur when the user’s mouse pointer is moved over or out of an object. The onMouseMove event occurs when the mouse just touches the object. In Example 13.9, every time the user touches the button labeled onMouseMove with his or her mouse, a function called counter() is invoked to keep track of the number of mouse moves that have taken place. That number is displayed in an alert dialog box, as shown in Figure 13.10. If the user double-clicks the mouse anywhere on the page, the a message will appear, and if OK is clicked, the window will be closed. EXAMPLE 13.9 <html> <head><title>Mouse Events</title> 1 <script type="text/javascript"> 2 var counter=0; 3 function alertme(){ alert("I'm outta hea!"); 4 window.close(); } 5 function track_Moves(){ 6 counter++; if(counter==1){ alert(counter + " mouse moves so far!"); } else{ alert(counter + " mouse moves so far!"); } } </script> </head> 7 <body bgColor="CCFF00" onDblClick="alertme()";> <p><font face="arial" size=3> Double click anywhere on this page to get out! </p><p> When the mouse moves over the link, an event is triggered. 8 <a href="#" onMouseOver="alert('Event:onMouseOver');" /> onMouseOver </a></p><p> When the mouse moves away from a link, an event is triggered. 9 <a href="#" onMouseOut="alert('Event:onMouseOut');" /> onMouseOut </a></p><p> When the mouse moves in or out of the button, a function<br /> is called that keeps track of how many times the mouse touched the button. Continues From the Library of WoweBook.Com ptg 476 Chapter 13 • Handling Events 10 <form> <input type="button" value="onMouseMove" 11 onMouseMove="track_Moves();" /> </form> </p> </body> </html> EXPLANATION 1 A JavaScript program starts here. 2 A global variable called counter is initialized. 3 If the user double-clicks the mouse anywhere on the page, an alert dialog box will appear; if the user clicks OK in the alert dialog box, the window will be closed. 4 The window’s close method causes the current window to be closed. 5 This function is called when the onMouseOver event handler is triggered. This event happens when the user touches the mouse on an object, in this case, a but- ton object. 6 The counter is incremented by one every time the user touches the button. 7 The onDblClick event handler is an attribute of the HTML <body> tag. When the user double-clicks the mouse, the alertme() function will be called, and the win- dow closed. 8 The onMouseOver event handler is an attribute of the <a href> link tag. It is trig- gered anytime the user moves the mouse over the link. (The link has been deac- tivated by using the # sign.) When this event occurs, the alert method is called. 9 The onMouseOut event handler is an attribute of the <a href> link tag. Any time the user moves the mouse away from this link, the event is triggered, and the alert method is called. 10 The form starts here. The input type is a button. 11 When the user’s mouse touches the button, the onMouseMove event handler is triggered, and the track_Moves() function is called. This function will simply in- crement a counter by one each time it is called, and then alert the user. EXAMPLE 13.9 (CONTINUED) From the Library of WoweBook.Com ptg 13.4 Handling Mouse Events 477 13.4.2 Mouse Events and Images—Rollovers The onMouseOver and onMouseOut event handlers are commonly used to create a roll- over, an image that is replaced with a different image every time the mouse moves over a link or image. (See section “A Simple Rollover with a Mouse Event” on page 432 in Chapter 12.) In the following example, if the user touches the first link, the picture of the first mouse will be replaced with a new picture, giving the illusion that the mouse’s eyes are moving. Figure 13.10 Links and mouse events. EXAMPLE 13.10 <html> <head><title>Mouse Events</title></head> <body bgColor="orange"> 1 <a href="#" onMouseOver="document.mouse.src='mouse.gif'"> onMouseOver </a><p> 2 <a href="#" onMouseOut="document.mouse.src='mouse2.gif';"> onMouseOut</a><p> 3 <img src="mousestart.gif" width=300 height=150 name="mouse"> </body> </html> EXPLANATION 1 The onMouseOver event handler is assigned to a deactivated link (# causes the link to be inactive). When the mouse rolls onto the link, the event is triggered, and a new image called mouse.gif will replace the original image, mousestart.gif. Continues From the Library of WoweBook.Com ptg 478 Chapter 13 • Handling Events 13.4.3 Creating a Slideshow with Mouse Events By using a timer with an event, you can do all sorts of fun things with images. You can create scrolling banners, rotating billboards, button rollovers, and more. Example 13.11 is a simple slideshow. Four images are preloaded and each image is assigned to an array element. When the user moves the mouse onto one of the pictures, a new picture will replace the previous one every 2 seconds, and when he or she moves the mouse away from the image, the show stops. Any time the mouse moves over the image, the show starts again. 2 The onMouseOut event handler is assigned to another deactivated link, this time with another image of the mouse. When the mouse rolls away from the link, the event is triggered, and a new image called mouse2.gif will replace the last image, mouse.gif. By rolling the mouse back and forth, the mouse’s eyes seem to move. The words “hi” and “bye” also keep changing. 3 This is the original image that is displayed before the links are touched. See Figure 13.11. Figure 13.11 Original display (left), as the mouse moves over the link (middle), and as the mouse moves away from the link (right). EXAMPLE 13.11 <html> <head><title>The Four Seasons</title> <script type="text/javascript"> 1 var season = new Array(); 2 var indx = 0; 3 var timeDelay=2000; EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 13.4 Handling Mouse Events 479 4 season[0]=new Image(); 5 season[0].src="winter.jpg"; season[1]=new Image(); season[1].src="summer.jpg"; season[2]=new Image(); season[2].src="fall.jpg"; season[3]=new Image(); season[3].src="spring.jpg"; 6 function changeSeason(){ 7 var size= season.length - 1; if( indx < size ) { indx++; } else { indx = 0; } 8 document.times.src= season[indx].src; 9 timeout=setTimeout('changeSeason()', timeDelay); } 10 function stopShow(){ 11 clearTimeout(timeout); } </script> </head> <body bgcolor="cornflowerblue"> <div align="center"><font face="arial"> <h2>The 4 Seasons</h2><b> To see slide show, put your mouse on the image.<br /> Move your mouse away from the image, to stop it. 12 <a href="JavaScript:void(null);" onMouseOver="return changeSeason();" onMouseOut="return stopShow()"> <img name="times" src="winter.jpg" align="left" border=8 hspace="10" width="700" height="200"> </a> <br /> </div> </body> </html> EXPLANATION 1 A new Array object called season is declared. It will be used to store an array of images. 2 A global variable called indx is declared and initialized to 0. 3 The value 2000 is assigned to another global variable, called timeDelay. 4 Using the Image() constructor preloads and caches the images. Each new image object is assigned to an element of the season array. Continues EXAMPLE 13.11 (CONTINUED) From the Library of WoweBook.Com ptg 480 Chapter 13 • Handling Events 5 The first element of the season array gets a new Image object. The src property (the location and name of the image) is winter.jpg, located in the present working di- rectory. 6 A user-defined function called changeSeason() is defined. It is called when the on- MouseOver event handler is triggered by the user moving the mouse onto the im- age. Its purpose is to replace one image with another image in the season array, every 2 seconds, for as long as the user’s mouse is on the image. (It might be nice to add a little Vivaldi audio clip here to enhance the show!) 7 The size of the array is its length – 1 because array indexes start at 0. As long as the array size isn’t surpassed, the index value will keep being incremented by 1. 8 This is where image replacement happens. The name of the original image is times (line 14) and it is referenced by JavaScript using the DOM hierarchy: doc- ment.times.src is assigned a new image from the season array, season[indx].src. The new image will be displayed. 9 The window object’s setTimeout() method will be set to call the changeSeason() function every 2,000 milliseconds (2 seconds). Every 2 seconds a new image is displayed as long as the user keeps the mouse on an image. 10 The user-defined function called stopShow() is defined. It is called when the on- MouseOut event is triggered by the mouse moving away from the image. It turns off the timer, stopping the slideshow. 11 The setTimeout() method is cleared. 12 The link has two mouse event handlers, onMouseOver and onMouseOut. The pseu- do URL, JavaScript:void(null), deactivates the link and ensures that if there is a re- turn value from the event, it will be nullified. Because neither of the events returns anything, it would be enough to just use the protocol as JavaScript:. The display is shown in Figures 13.12 and 13.13. Figure 13.12 Watch the seasons change every 2 seconds. EXPLANATION From the Library of WoweBook.Com ptg 13.5 Handling Link Events 481 13.5 Handling Link Events In many of the previous examples, links have been used to trigger events. When the user clicked or moved the mouse over a link, a link event was triggered. One link event, onClick, gets sent whenever someone clicks on a link. As we saw with mouse events, onMouseOver and onMouseOut also cause a link event to occur. The link events are listed in Table 13.5. 13.5.1 JavaScript URLs We have seen JavaScript code in a JavaScript: URL throughout this text. In the example using mouse events, the event handler was assigned to a link and the link was deacti- vated by assigning a quoted hash mark to the link href attribute: Figure 13.13 Spring image (top), summer image (middle), and fall image (bottom) are all part of the slideshow created in Example 13.11. Table 13.5 Link Events Event Handler When It Is Triggered onClick When the mouse is clicked on a link onMouseOut When a mouse is moved out of a link onMouseOver When a mouse is moved over a link From the Library of WoweBook.Com . link event to occur. The link events are listed in Table 13.5. 13.5.1 JavaScript URLs We have seen JavaScript code in a JavaScript: URL throughout this text. In the example using mouse events,. onMouseMove="track_Moves();" /> </form> </p> </body> </html> EXPLANATION 1 A JavaScript program starts here. 2 A global variable called counter is initialized. 3 If the user. 13.11 <html> <head><title>The Four Seasons</title> <script type="text /javascript& quot;> 1 var season = new Array(); 2 var indx = 0; 3 var timeDelay=2000; EXPLANATION