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

Naturally, this would be extremely time consuming if you had more than one image.
However, with JavaScript, you are presented with an easy answer. You are able to create
functions in JavaScript that defines how the switch is to take place and then simply call
those functions from within the < a > tags. You will need two functions: one for the mouse
over, and one that returns the image (the mouse out). Consider LoudOffice.com. The
navigation menus on the site feature images that change when they are moused over:

That navigation bar simply uses mouseovers in order to change the images as your pointer
moves over them. In order to keep things simple, I use the following naming convention:

Image Off: i m a g e n a m e . g i f
Image On: i m a g e n a m e _ f 2 . g i f
In order to perform these mouseovers, I use the following two functions:
< S C R I P T L A N G U A G E = " J A V A S C R I P T " >
< ! - - / / H i d e
f u n c t i o n M o u s e O n ( i m a g e N a m e ) {
d o c u m e n t . i m a g e s [ i m a g e N a m e ] . s r c =
" h t t p : / / w w w . l o u d o f f i c e . c o m / i m a g e s / " + i m a g e N a m e + " _ f 2 . g i f " ;
}
f u n c t i o n M o u s e O f f ( i m a g e N a m e ) {
d o c u m e n t . i m a g e s [ i m a g e N a m e ] . s r c = "
h t t p : / / w w w . l o u d o f f i c e . c o m / i m a g e s / " + i m a g e N a m e + " . g i f " ;
}
/ / u n H i d e - - >
< / S C R I P T >

Anytime I wish to swap images, all I need to do is call the function from within the HTML
code:

< a h r e f = " h t t p : / / w w w . l o u d o f f i c e . c o m / a b o u t _ u s . h t m "
o n M o u s e O v e r = " M o u s e O n ( ' a b o u t _ u s ' ) ; "
o n M o u s e O u t = " M o u s e O f f ( ' a b o u t _ u s ' ) " >
< i m g n a m e = " a b o u t _ u s "
s r c = " h t t p : / / w w w . l o u d o f f i c e . c o m / i m a g e s / a b o u t _ u s . g i f "
w i d t h = " 1 2 6 " h e i g h t = " 2 0 " b o r d e r = " 0 "
a l t = " A b o u t U s " > < / a >
< b r >
< a h r e f = " h t t p : / / w w w . l o u d o f f i c e . c o m / m a r k e t i n g _ s e r v i c e s . h t m "
o n M o u s e O v e r = " M o u s e O n ( ' m a r k e t i n g ' ) ; "

LoudOffice.com Guide to HTML – Part II Page 30