diff options
Diffstat (limited to 'javascript/examples/example5.html')
| -rw-r--r-- | javascript/examples/example5.html | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/javascript/examples/example5.html b/javascript/examples/example5.html new file mode 100644 index 0000000..6142d41 --- /dev/null +++ b/javascript/examples/example5.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" + "http://www.w3.org/TR/REC-html40/strict.dtd"> +<html> + <head> + <title>[DOM Tooltip] Example 5: Advanced Features</title> + <style> +@import url(example.css); + </style> + <script type="text/javascript" language="javascript" src="../domLib.js"></script> + <script type="text/javascript" language="javascript" src="../fadomatic.js"></script> + <script type="text/javascript" language="javascript" src="../domTT.js"></script> + <script> +var domTT_styleClass = 'domTTOverlib'; +var domTT_oneOnly = true; + </script> + </head> + <body> + <div class="title">Example 5: Advanced Features</div> + <div class="main"> + <p>Now we are going to strut our stuff and show some advanced features. The first link adheres to a snap grid. The second link demonstrates alpha fading.* The last target has a tip which trails with a slight delay.</p> + <p> + <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'I am trailing on a grid', 'trail', true, 'grid', 10);">Snap to grid</a> + | + <a href="index.html" onmouseover="this.style.color = '#D17E62'; domTT_activate(this, event, 'content', 'The Zepher Appears!<p>Thank you, but please hold the applause until the end of the show.</p>', 'trail', true, 'fade', 'both', 'fadeMax', 87, 'styleClass', 'niceTitle');" onmouseout="this.style.color = ''; domTT_mouseout(this, event);">Tooltip fading in</a> + | + <a href="index.html" onmouseover="domTT_activate(this, event, 'caption', 'Feeling Tipsy?', 'content', 'This tip should probably call a designated driver.', 'trail', true, 'lazy', true);">Lazy trailing</a> + | + <a href="index.html" onmouseover="domTT_activate(this, event, 'caption', false, 'content', 'This tip will close when any other tip is activated<br />The caption was set to <code>false</code> to prevent it from being created', 'type', 'sticky');">One tooltip only</a> + </p> + <p>Notice that the second <a href="http://www.google.com">link</a> changes color when the mouse passes over it. This demonstrates that other mouseover events can coexist with the activation of the tooltip.</p> + <p class="small">* The alpha fading does not work in all browsers.</p> + <p class="small">* The link directly below the "Tooltip fading in" target demonstrates that links previously covered by a tooltip are still active when the tooltip disappears.</p> + <p class="small"><strong>Help!</strong> Anyone know why I cannot get lazy trailing to work for Opera?</p> + </div> + <div style="float: left;"><a href="example4.html">«Example 4</a></div><div style="float: right;"><a href="example6.html">Example 6»</a></div> + <div id="pos"></div> + </body> +</html> |