Events
onmouseover & onmouseout
This page presents cross-browser use of onmouseover
and onmouseout events. If you move mouse over one of the links below, its
background colour is changed to yellow. When the mouse moves out, the colour
is set back to the background colour.
Tested under Netscape Communicator 4.79 and Internet
Explorer 5 (for UNIX).
Resources: developer.netscape.com/evangelism, www.dansteinman.com/dynduo
Link list:
See the SOURCE file.
Using the Links
1) include the source files (I recommand you to copy them into your directory):
<script type="text/javascript" src="http://developer.netscape.com/evangelism/lib/js/ua.js"></script>
<script type="text/javascript" src="http://jakubholy.webpark.cz/js/links.js"></script>
2) add style for the links, e.g. <style type="text/css"> DIV
{position: absolute;} </style>
3) set body's onload: <body onload="initlinks(number-of-links)">
... </body> Number-of -links is >= 1.
4) surround the text that should become a link by div element with appropriate
id, for instance: <div id="link1Div"> some content </div>That's
all! (If you want to set different colours for active/inactive link, just set
variables bgcolor_on (active) or/and bgcolor_off(inactive).)
Notes on Code
Note: to work in NS4, the div element must have a) position:absolute
b) background-color must not be set(otherwise the declared color, which
is bg. color of the inner text, is above the new color -bg. color of layer
- we want to assign). You can use layer-background-color instead, but that
doesn't work in other browsers.
How it works?
Essentially, when the page is loaded, two events are
assigned to each of links: for onmouseover and onmouseout. This part is
different for various browsers. To distinguish among them, I use navigator.family
property that is set by a function included in the file ua.js (to set it,
just link the script to your page:
<script type="text/javascript" src="http://developer.netscape.com/evangelism/lib/js/ua.js"></script>)
Then, when the event occurs, the listeners are called (inside their
bodies 'this' points to the element from which they have been called) and
applies my function setBgColor on the element.
HTML
To create a link (by "link" I mean the 'interactive' text) just surround
the text by div tag with id="link?Div" where ? is the number of the new
link (? is >= 1) and update the LINKS_NUMBER. Somewhere a style for the
link must be set (position must be absolute). See the source (<style>
tag). So a link looks is e.g. <div id="link1Div"> inner html</div>
created 2002 AD by Jakub Holy