 |
JavaScript tutorialWeb development tutorialsHomepage|
|
JavaScript Event Handlers - onmouseover and onmouseoutMore interactivity - making several things happen at the same timeTo change both the background color and the status bar message when the mouse pointer is passed over a link, you have to include two JavaScript statements to the same event handler, onmouseover. <A HREF="http://www.webdevelopersnotes.com/" onmouseover="window.status='Go Back To Home Page'; document.bgColor='#EEEEEE'"> Change the background color and put a message on the status bar </A> Note: The two JavaScript statements window.status='Go Back To Home Page' and document.bgColor='#EEEEEE' are separated by a semicolon which informs the JavaScript interpreter to treat the two as individual statements. Change the background color and put a message on the status bar A similar example is to bring up an alert box and change the background color.
<A HREF="http://www.webdevelopersnotes.com/"
onmouseover="window.alert('Go Back To Home Page');
document.bgColor='#EEFFFF'">
Change the background color and bring up an alert box</A>
Change the background color and bring up an alert box When you pass the mouse cursor over the link above, you'll notice that the alert box is displayed first, JavaScript execution is stopped. Once the OK button is clicked the next statement is executed that changes the background color. Meeting another event handler <A HREF="http://www.webdevelopersnotes.com/" onmouseout="document.bgColor='#FFEEEE'"> Changes the background color when the mouse is placed and then taken off the link </A> Take your mouse pointer gradually over the link and keep it there... nothing happens; however, the moment you take it off, the background color is changed. Changes the background color when the mouse is placed and then taken off the link Using two event handlers for the same object <A HREF="http://www.webdevelopersnotes.com/" onmouseover="document.bgColor='#FFFF00'" onmouseout="document.bgColor='#FFFFEE'"> Move your mouse over me! </A> onmouseover changes the background color to a bright yellow while onmouseout changes it back to the original color.  I hope by now, you would have got the hang of using event handlers. Let's see if you are able to crack the following exercise:
Page contents: Javascript onmouseover and onmouseout event handlers - how to use event handlers in javascript
Page URL: http://www.webdevelopersnotes.com/tutorials/javascript/ javascript_event_handlers_onmouseover_onmouseout.php3
|
|
