Web Programming with HTML, XHTML, and CSS- P10: There are a lot of books about designing and building web pages, so thank you for picking up this one. Why do I think it is different? Well, the Web has been around for over a decade now, and during its life many technologies have been introduced to help you create web pages, some of which have lasted, others of which have disappeared. Many books that teach you to write web pages are revisions of earlier versions of the same book and therefore still take the same approach as the previous edition did | Chapter 11 Learning JavaScript 4. Save this example as and open it in your browser. Then roll your mouse over the image without clicking it . You should see something like Figure 11-5 with the mouse over the image. Figure 11-5 How It Works When the user rolls over the image the onmouseover event fires and when the user moves off it again the onmouseout event fires. This is why there are separate attributes that correspond to each of these events and when one of these two events fires the script held as a value for the corresponding attribute is executed. The script in the onmouseover and onmouseout event handler attributes tells the browser to change the src attribute of the image and therefore a different image is displayed to the user. The first onmouseover indicates what should happen when the mouse is placed over the image the second onmouseout indicates what should be done when the mouse is moved off the image. You can see in the code for that when the user puts the mouse over an image the src property of the image inside the link named using the notation is changed. a href onmouseover onmouseout img src width 100 height 50 border 0 name button a The img element must have a name attribute so that the image can be referenced in this way in the link otherwise you would have to use its index in the images collection . It is generally best to use the name in situations like this rather than the index of that image in the images collection because if you were to add another image into the document before this one the whole script would need changing. Note that if no event indicated what should happen when the user takes the mouse off the image it would remain red rather than turning back to green. An image rollover script is a good example of changing or setting that property rather than just reading it. You learn .
