The events Click, MouseOver, and MouseOut preceded by "on", designate that when the event takes place do what follows, in this case generate a pop-up. Note that what follows is a JS statement ending with a semicolon. A series of JS statements could be done just as well. The event Load has been used previously in discussing background and text color and in making a clock. In these instances the event handler was onLoad. Some particulars merit note. WebTV supports only a limited number of events that can be enabled by an event handler. Things like onMouseUp and onMouseDown, onKeyUp and onKeyDown are not supported, but onKeyPress is now. There may be, at times, a problem with link events when creating pop-ups such as "alert". There is nothing following the href, it may be just two quotes with no space(s) in between or there can be #1 between the quotes. These will work with WebTV, but sometimes the browser looks for a link to go to and finding none gives a "...couldn't find the requested page" pop-up instead. A more generally useful apprach is to place a voiding statement, "javascript:void(0)", after the "href=" to prevent the browser from attempting a redirect. br> Some things that can be accomplished with event handlers such as this require little change in the link statement. For example, choosing for convenience onMouseOver a message can be made to appear in the status-bar. Toggle between the "Look" and "Clear" links to see what is intended.
Care should be exercised in the type of use made of MouseOvers. One could choose to have a link such as this transfer the viewer to another page. Fine if at the end of a page, but hardly a benefit of any kind if the viewer is transported out of the page while in the middle of it. The code below will accomplish this, but will not be demonstrated. It is a good excercise. Besides, this section is still continuing.
A pair of events related to Mouseovers and often seen in relation to form buttons on WebTV is presented below. These are Focus, where the cursor highlights the button, and Blur, when the cursor is removed. The event handler onFocus causes the original text to be replaced by another text. The onBlur event handler is used to return the original text.
Images as well as text can be changed like this. No new event handlers have to be introduced. It is just a way of using a MouseOver. Since JS is being used, an image must at least initially be given a name: To make the image change to a new one the URL for the other must be known. For things of this type it is convenient to use: The stem URL for WebTV users with Scrapbook images would be: Now all images used on this page can be referenced using just their end extension, e.g., importD23.gif or mailedD12.jpg. In the MouseOver for an image swap, the beginning image and the following image are each referenced. For this, the image URL is made a variable. On each MouseOver the variable is changed to another variable, which is another image. Move the cursor between the "Rest" and the image. Wait a bit, for at times it will take a while for the image to load. Smaller images load much more quickly, and all will be made the same size as the original. The selection should therefore be made appropriately.
It will be noted that each image swap is followed by a semicolon. This means that a JS statement is being carried out. With only a very slight modification, each image could be made clickable to a separate link. JS Test-Bed 1 - - JS Test-Bed 2
|
