Kai Button

The standard JavaScript 'image rollover' - an image that changes appearance as you move the mouse over it. They don't serve any very practical purpose (beyond slowing page-loading and wasting bandwidth) but - with more inspired graphics than on this page - they can add a certain style to a page.The JavaScript works by loading several alternative images for each button. If the user moves the mouse in or out of the button's area, a JavaScript function is invoked to change the image displayed. It does this by changing the 'src' attribute of the named button image. If you move your mouse over the buttons above and nothing happens, this may mean that your browser doesn't support (or isn't known to support) this kind of image manipulation.These buttons only respond to the onMouseOver and onMouseOut events; they might equally well respond to onClick in exactly the same way, but there are valid reasons for them not to: adding yet another image for each button to show its clicked state increases download time still further and may produce ugly artifacts on some browsers (the 'clicked' image is not fully drawn before the browser starts searching for the next page).One point to notice is that the handlers which call the image-changing function return a variety of values. onMouseOver and onMouseOut both need to return false so that the browser can update the status line to show the URL of the link appropriately. If you do decide to add an onClick handler, on the other hand, it needs to return true, so that the browser actually processes the click and sends the user to the appropriate page.