1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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>
|
