diff options
| author | Thomas Keil <tkeil (at) datacrystal (dot) de> | 2007-01-04 22:29:18 +0000 |
|---|---|---|
| committer | Thomas Keil <tkeil (at) datacrystal (dot) de> | 2007-01-04 22:29:18 +0000 |
| commit | 710c48f908290c52b93e57e29741fcd0696b2d22 (patch) | |
| tree | cefaa11c5d529041a64ec793cecf95d13c48e242 /javascript/examples/example3.html | |
| parent | d4d1dec8f3f204ad0d7abac3b553c5023a4324bd (diff) | |
| download | vdr-plugin-live-710c48f908290c52b93e57e29741fcd0696b2d22.tar.gz vdr-plugin-live-710c48f908290c52b93e57e29741fcd0696b2d22.tar.bz2 | |
*** empty log message ***
Diffstat (limited to 'javascript/examples/example3.html')
| -rw-r--r-- | javascript/examples/example3.html | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/javascript/examples/example3.html b/javascript/examples/example3.html new file mode 100644 index 0000000..93825fc --- /dev/null +++ b/javascript/examples/example3.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" + "http://www.w3.org/TR/REC-html40/strict.dtd"> +<html> + <head> + <title>[DOM Tooltip] Example 3: Styled Tooltips</title> + <style> +@import url(example.css); + </style> + <script type="text/javascript" language="javascript" src="../domLib.js"></script> + <script type="text/javascript" language="javascript" src="../domTT.js"></script> + <script type="text/javascript" language="javascript"> +var domTT_styleClass = 'domTTOverlib'; + </script> + </head> + <body> + <div class="title">Example 3: Styled Tooltips</div> + <div class="main"> + <p>The third example demonstrates how easily DOM Tooltips can duplicate the styles of other tooltips found around the web. The first link uses the default <a href="http://www.bosrup.com/web/overlib/">overlib</a> style and appears without a delay. The second link adds an auto-generated caption to the tooltip and only trails the mouse on the 'x' axis. Getting a bit more fancy, the third link uses the more stylish <a href="http://www.kryogenix.org/code/browser/nicetitle/">nicetitles</a> style, using a calculated position and XHTML in the content rather than just plain text.*</p> + <p> + <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'This tooltip uses the overlib style.', 'trail', true, 'delay', 0);">overlib style</a> + | + <a href="index.html" onmouseover="domTT_activate(this, event, 'caption', 'The caption goes here...', 'content', '...and the content goes here.', 'trail', 'x');">overlib style with caption</a> + | + <a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'Many weblogs are now sporting this look.<p>i.e. http://blog.codefront.net</p>', 'styleClass', 'niceTitle', 'x', this.offsetLeft + 5, 'y', this.offsetTop + 5);">nicetitles style</a> + </p> + <p class="small">* The nicetitle style is taking advantage of the transparency and curved border style provided in some of the newer browsers, such as Mozilla, to add to the sleak look. These settings will not be visible in all browsers.</p> + </div> + <div style="float: left;"><a href="example2.html">«Example 2</a></div><div style="float: right;"><a href="example4.html">Example 4»</a></div> + </body> +</html> |