Page 29 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

o n M o u s e O u t = " j a v a s c r i p t : w i n d o w . s t a t u s = ' ' ; r e t u r n
t r u e ; " > R e t u r n H o m e < / a >
As you can see below, once you mouse over that link, the window’s status bar is changed:

The most common reason to use the o n M o u s e O v e r event is with images. HTML and
Javascript is used together. The first part of a JavaScript mouse over is the image. One
attribute of the < i m g > tag we’ve not explored before is the n a m e attribute. This allows you
to name the image being displayed:
< i m g n a m e = " m o u s e 1 " s r c = " g i f s / m o u s e _ o u t . g i f " b o r d e r = 0 >
Now that this image is named, it is part of the Document Object Model (DOM). It is now
named m o u s e 1 and can be manipulated by using JavaScript on the document. For
example, we can now use JavaScript and the DOM in order to change the source of the
image object named m o u s e 1 . Below is a simple image mouse over:
< a h r e f = " h t t p : / / w w w . y a h o o . c o m "
o n M o u s e O v e r = " m o u s e 1 . s r c = ' g i f s / m o u s e _ o v e r . g i f ' ; "
o n M o u s e O u t = " m o u s e 1 . s r c = ' g i f s / m o u s e _ o u t . g i f ' ; " >
< I M G n a m e = " m o u s e 1 " s r c = " g i f s / m o u s e _ o u t . g i f "
b o r d e r = 0 > < / a >
Produces the following result:

As you mouse passes over the initial image, the s r c is dynamically changed by JavaScript,
triggered by the O n M o u s e O v e r event. Once your mouse leaves the image, it changes back
using the o n M o u s e O u t event.

LoudOffice.com Guide to HTML – Part II Page 29