DIR : /home/kozerus/public_html/cropex/js/wz/wz_tt2.html
/home/kozerus/public_html/cropex/js/wz
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"-->
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>DHTML JavaScript Tooltips: Extensions (Plugins)</title>
<link rel="stylesheet" type="text/css" href="/js/wz/newwalterzorn.css">
<style type="text/css">
<!--
.tt {
font-size:12px;
}
#T2tDirect {
border:2px solid red;
background:yellow;
padding:3px;
width:240px;
}
-->
</style>
<script type="text/javascript">
<!--
function MyTip(arg)
{
switch(arg)
{
case "home":
return Tip("Go to the startpage of walterzorn.com", SHADOW, true);
case "tip":
return Tip("Go to the Tooltips main page", SHADOW, true);
case "centeralways":
return Tip("To this one CENTERWINDOW and CENTERALWAYS have been applied, so it keeps its centered position even if the window is resized or scrolled", TITLE, "Stay Always Centered", CENTERWINDOW, true, CENTERALWAYS, true, STICKY, true, CLOSEBTN, true, WIDTH, 300);
case "followscroll":
return Tip('This tooltip is sticky (STICKY command), and it keeps its position inside the clientarea even if the window is scrolled', TITLE, 'FOLLOWSCROLL', STICKY, true, FOLLOWSCROLL, true, CLOSEBTN, true, WIDTH, 300);
}
}
//-->
</script>
<script type="text/javascript" src="/js/wz/walterzorn.js"></script></head><body bgcolor="#ffffff"><div id="WzTtDiV" style="visibility: hidden; position: absolute; overflow: hidden; padding: 0px; width: 1919px; left: -1920px; top: 0px; z-index: 1010;"></div>
<script type="text/javascript" src="/js/wz/wz_tooltip.js"></script><div style="padding: 0px; overflow: hidden; visibility: hidden; position: absolute; width: 1279px; left: -1280px; top: 0px;" id="WzTtDiV"></div>
<script type="text/javascript" src="/js/wz/tip_balloon.js"></script>
<script type="text/javascript" src="/js/wz/tip_centerwindow.js"></script>
<script type="text/javascript" src="/js/wz/tip_followscroll.js"></script>
<a name="top"> </a>
<center>
<table>
<tbody><tr>
<td align="center"><a onmouseover="MyTip('home')" href="http://www.walterzorn.com/index.htm"><img name="logo" src="/js/wz/logo.gif" alt="" width="271" height="30" border="0"></a></td>
</tr>
</tbody></table>
<table cellspacing="10">
<tbody><tr>
<td><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltip JavaScript" width="1" height="1"><a onmouseover="MyTip('home')" href="http://www.walterzorn.com/index.htm">Home</a></td>
<td><a onmouseover="MyTip('tip')" href="http://www.walterzorn.com/tooltip/tooltip_e.htm">Tooltips Main Page</a></td>
</tr>
<!--tr><td colspan="4"><form><select onmouseover="Tip('Tooltip applied to SELECT')"><option>abdlkdvsadfasdfasdvasdfasdfadfadfadsfassdfvsdadfasdfdfvsdfasd</option><option>avasas</option></select> <input type="text" size="20"></form></td></tr-->
</tbody></table>
<br>
<table width="760">
<tbody><tr>
<td width="120"><br></td>
<td>
<table>
<tbody><tr>
<td>
<big> <br><b>Extensions for the JavaScript Tooltips Library</b></big>
</td>
<td><br></td>
</tr>
<tr>
<td>
These extensions (plugins) provide additional commands and
functionalities to customize the look and behaviour of tooltips. <br> <br> To use an extension, include its
JavaScript file into your page, immediately after the core file of the
Tooltips Library itself. Example: </td>
<td><br></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="2" border="0">
<tbody><tr>
<td bgcolor="#eeeeee">
<tt><font class="tt" size="2"><script type="text/javascript" src="wz_tooltip.js"></script></font></tt>
<br>
<tt><font class="tt" size="2"><script type="text/javascript" src="tip_centerwindow.js"></script></font></tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td><br></td>
</tr>
<tr>
<td>
Adapt the paths to the JavaScript files if necessary. Replace
"tip_centerwindow.js" with the file name of the desired extension. You
can include multiple extension files in any order; just make sure that
the core file wz_tooltip.js is included first (immediately after the
opening <body> tag). </td>
<td><br></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="760">
<tbody><tr>
<td width="120"><br></td>
<td>
<table>
<tbody><tr>
<td>
<big> <br> <br><a name="centertip"> </a> <br><b>Balloon Tooltip</b></big>
</td>
<td rowspan="2" valign="top">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips via JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onmouseover="Tip('This is a <b>balloon tooltip<\/b> that demonstrates the automatic width and height adaption of the rounded balloon edges. Placed above the mouse via ABOVE command, animation via FADEIN and FADEOUT.', BALLOON, true, ABOVE, true, OFFSETX, -10, WIDTH, 360, TEXTALIGN, 'justify', FADEIN, 600, FADEOUT, 600, PADDING, 8)">Example</a>
<br>
Gives the tooltip a balloon style, with rounded corners and a stem pointing towards the hovered HTML element.
<br> <br>
File to include: tip_balloon.js.
<br>
Download <a onmouseover="Tip('Contains the plugin file tip_balloon.js<br>plus the edge, corner and stem images', BALLOON, true, ABOVE, true, OFFSETX, 0)" href="http://www.walterzorn.com/scripts/tip_balloon.zip">tip_balloon.zip</a> (5 KB)
<br> <br>
This file contains also a set of images that build the stem, edges and
corners of the balloon tooltip. You must save these images, preferably
leaving them in the sub-directory 'tip_balloon'. In the plugin file
tip_ballon.js, section "GLOBAL TOOPTIP CONFIGURATION", you
must adapt the path to these images if necessary. The line to be
changed is self-explanatory and commented. <br> <br> Of course you can also create your own
set of edge/corner/stem images. Note that the corner images (lt.gif,
rt.gif, rb.gif und lb.gif) must be quadratic, and their side lengths
must be equal to the width of the left/right edge images (l.gif, r.gif)
and to the height of the top/bottom edge images (t.gif, b.gif). In the
plugin file tip_balloon.js, you should then adapt the global config
variables that specify the sizes of these images, if necessary. (If you
want to use different sets of images, you can also specify the image
path and sizes for each tooltip individually via commands. See below.) <br>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td><br></td>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="6" border="0">
<tbody><tr bgcolor="#eeeeee">
<th align="left">Command</th>
<th align="left">Description</th>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This is a "balloon" tooltip', BALLOON, true)">BALLOON</a></tt>
</td>
<td>
Gives the tooltip a balloon style.
Value: true or false.
<br>
Recommended: Combine with
<tt><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('Balloon tooltip positioned above the mouse', BALLOON, true, ABOVE, true, OFFSETX, 0)">ABOVE</a></tt>
command, or set the <tt>config. Above</tt> variable in the global cofiguration in wz_tooltip.js to true if you want this to be the default behaviour.
<br> <br>
Example:
<br>
<tt><font style="font-size: 12px;" size="2">onmouseover="Tip('This is a balloon tooltip', BALLOON, true, ABOVE, true)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><b>BALLOONIMGPATH</b></tt>
</td>
<td>
Specifies the path to the images that build the edges, corners and stem of the balloon tooltip.
Useful if you want to use a different set of images (e.g. of other colours) for a certain tooltip.
Path must be relative to the HTML file, and enclosed with single quotes.
<br> <br>
Example:
<br>
<tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Tooltip text', BALLOON, true, BALLOONIMGPATH, 'somepath/otherdirectory/')"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><b>BALLOONEDGESIZE</b></tt>
<br>
<tt><b>BALLOONSTEMWIDTH</b></tt>
<br>
<tt><b>BALLOONSTEMHEIGHT</b></tt>
</td>
<td>
If you want to use a different set of edge/corner/stem images for a
certain balloon tooltip, these commands allow you to notify the script
about the sizes of those images, in case that they differ from the
global settings in tip_balloon.js. Values: Integers > 0. </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="760">
<tbody><tr>
<td width="120"><br></td>
<td>
<table>
<tbody><tr>
<td>
<big> <br> <br><a name="centertip"> </a> <br><b>Center Tooltip In Window</b></big>
</td>
<td rowspan="2" valign="top">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips via JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onmouseover="Tip('This tooltip is centered in the window\'s clientarea', TITLE, 'Centered', STICKY, true, CENTERWINDOW, true, CENTERALWAYS, true, CLOSEBTN, true)">Example</a>
<br>
File to include: tip_centerwindow.js (comes with the download file wz_tooltip.zip)
<br> <br>
Provides command(s) to center the tooltip in the visible clientarea of
the browserwindow. Makes only sense and works only with "sticky"
tooltips, that is, to which the STICKY command has been applied so they
stay fixed at their initial position until another tooltip pops up. <br>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td><br></td>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="6" border="0">
<tbody><tr bgcolor="#eeeeee">
<th align="left">Command</th>
<th align="left">Description</th>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip centered in the window\'s clientarea', TITLE, 'CENTERWINDOW', CENTERWINDOW, true, STICKY, true, CLOSEBTN, true);">CENTERWINDOW</a></tt>
</td>
<td>
Centers the tooltip inside the window's clientarea.
Value: true or false.
<br> <br>
Consider that the position of the tooltip deviates from the center by <tt>OFFSETX</tt> and <tt>OFFSETY</tt> (see commands on
<a onmouseover="MyTip('tip')" href="http://www.walterzorn.com/tooltip/tooltip_e.htm">tooltips main page</a>),
or by the values globally preset in wz_tooltip.js (<tt>config. OffsetX</tt> and <tt>config. OffsetY</tt>).
<br> <br>
Recommended: Combine with
<tt><a class="nodeco" href="javascript:void(0)" onmouseover="MyTip('centeralways')">CENTERALWAYS</a></tt>
(same extension).
Example:
<br>
<tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', STICKY, true, CENTERWINDOW, true, CENTERALWAYS, true)"</font></tt>
</td>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0)" onmouseover="MyTip('centeralways')">CENTERALWAYS</a></tt>
</td>
<td>
Keeps the tooltip centered in the window's clientarea even if the window is scrolled or resized.
Has only effect if also CENTERWINDOW (see above) has been applied.
Value: true, false.
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="760">
<tbody><tr>
<td width="120"><br></td>
<td>
<table>
<tbody><tr>
<td>
<big> <br> <br><a name="followscroll"> </a> <br><b>Follow Scroll</b></big>
</td>
<td rowspan="2" valign="top">
<table cellspacing="3" cellpadding="0">
<tbody><tr>
<td width="1" bgcolor="#000099"><img src="/js/wz/transparentpixel.gif" alt="DHTML: Tooltips via JavaScript" width="1" height="1"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br>
</small>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onmouseover="MyTip('followscroll')">Example</a>
<br>
File to include: tip_followscroll.js (comes with the download file wz_tooltip.zip)
<br> <br>
This extensions maintains a tooltip's position in the window's visible
clientarea even if the window is scrolled. Makes only sense and works
only with tooltips to which the STICKY command has been applied so they
stay at their initial position until another tooltip pops up. <br>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td><br></td>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="6" border="0">
<tbody><tr bgcolor="#eeeeee">
<th align="left">Command</th>
<th align="left">Description</th>
</tr>
<tr valign="top" bgcolor="#ffffff">
<td>
<tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This one keeps its position if the window is scrolled', TITLE, 'FOLLOWSCROLL', FOLLOWSCROLL, true, STICKY, true, CLOSEBTN, true);">FOLLOWSCROLL</a></tt>
</td>
<td>
Keeps the tooltip at its position in the window's clientarea even if the window is scrolled.
Value: true or false.
<br> <br>
Example:
<br>
<tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', STICKY, true, FOLLOWSCROLL, true)"</font></tt>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br> <br> <br> <br> <br> <br> <br><small><a href="javascript:void(0);" onmouseover="href=Ml();Tip(wMl(), BGCOLOR, '#f3e0f3');">Walter Zorn</a>, Munich, 2007</small>
<br>
<br> <br> <br> <br><img alt="" src="/js/wz/cnt.gif"> <small>visitors on www.walterzorn.com since 27. 12. 2002</small>
</center>
</body></html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer