diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/balloons.html b/pacotes/balloon-tooltips/htdocs_depreciado/balloons.html new file mode 100755 index 0000000..6b52cc2 --- /dev/null +++ b/pacotes/balloon-tooltips/htdocs_depreciado/balloons.html @@ -0,0 +1,130 @@ + + + Balloon tooltip demonstration + + + + + + + +

Balloon tooltip demonstration

+
+Javascript code: +balloon.js +  |   +Documentation: Wiki +
+
+ + + +This page is a demonstration of balloon.js, written by Sheldon McKay + +
+ +

+Page header with required components +

+
+<head>
+ <title>balloon tooltip demonstration</title>
+ <script type="text/javascript" src="/js/balloon.config.js"></script>
+ <script type="text/javascript" src="/js/balloon.js"></script>
+ <script type="text/javascript" src="/js/yahoo-dom-event.js"></script>
+ <script type="text/javascript"> var balloon = new balloon;</script>
+</head> 
+
+ + + +
+ +

+This is an example of a simple balloon message + +

+ <a href="javascript:void(0)" onmouseover="balloon.showTooltip(event,'I am a simple message...')">message</a>
+
+

+ +

+Roll over +this text for an example of HTML-formatted text loaded from a hidden <div> element. +

+ onmouseover="balloon.showTooltip(event,'load:lorem1')"
+
+ + +Adding a third argument makes the tooltip sticky. + +
+ onmouseover="balloon.showTooltip(event,'load:lorem2',1)"
+
+ +A fourth argument will set the width (Example: +300px sticky balloon) +
+ onmouseover="balloon.showTooltip(event,'load:lorem2',1,300)"
+
+

+ +

+Here is an example of a tooltip balloon that is populated by an + +image. +

+ onmouseover="balloon.showTooltip(event,'<img src=/images/balloons.png>')"
+
+

+ +

+This link will create a sticky balloon whose contents are from a remote URL. + +What's new?
This requires an embedded iframe. +

+ onmouseover="balloon.showTooltip(event,'\
+ <iframe style=\'width:270;height:300;border:0\' \
+ src=\'http://www.nypost.com/avantgo/avantnews/avantnews.htm\'></iframe>',1,300)"
+
+

+ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/balloons2.html b/pacotes/balloon-tooltips/htdocs_depreciado/balloons2.html new file mode 100755 index 0000000..49133bf --- /dev/null +++ b/pacotes/balloon-tooltips/htdocs_depreciado/balloons2.html @@ -0,0 +1,313 @@ + + + Balloon and box tooltips demonstration + + + + + + + + + +
+
+
+ + +
+This page is a demonstration of balloon.js, written by Sheldon McKay. +

+The balloon.js package is written in object-oriented JavaScript and allows you to add configurable balloon tooltips +(AKA popup balloons, bubbles, rollover tooltips etc., etc.) to your website. It was written for scientific web applications, such as +GBrowse and WormBase, +but is generic and portable to most websites. +
+The balloons are dynamically sized in both the vertical and horizontal dimensions and the left/right/up/down orientation +is calculated automatically based on the position of the cursor. Balloon contents can be provided locally in your own HTML or remotely via AJAX. +This package is open source and free to all as long as the copyright notice is retained. See below for demonstrations and documentation. +

+Please feel free to contact the author + for help with installation and usage. +

+

+
+ + + + + + + + + + + + + + + + + + + + +
Demonstration:plain hover +click me +blue balloon
popup boxfading box +sticky box
Documentation: + +http://gmod.org/wiki/Popup_Balloons +
Download: + +balloons.tar.gz +
+
+
+
+
+<head>
+ <title>Balloon tooltip demonstration</title>
+ <script type="text/javascript" src="/js/balloon.config.js"></script>
+ <script type="text/javascript" src="/js/balloon.js"></script>
+ <script type="text/javascript" src="/js/box.js"></script>
+ <script type="text/javascript" src="/js/yahoo-dom-event.js"></script>
+ <script type="text/javascript">
+   // white balloon with default configuration
+   var whiteBalloon       = new Balloon;
+
+   // Stemless blue balloon
+   var blueBalloon              = new Balloon;
+   blueBalloon.balloonTextSize  = '90%';
+   blueBalloon.images           = '/images/balloons';
+   blueBalloon.balloonImage     = 'blue_balloon.png';
+   blueBalloon.vOffset          = 15;
+   blueBalloon.shadow           = 0;
+   blueBalloon.stem             = false;
+   blueBalloon.ieImage          = null;
+
+   // a plainer popup box
+   var box         = new Box;
+   box.bgcolor     = 'ivory';
+   box.fontColor   = 'blue';
+   box.borderStyle = '4px ridge blue';
+
+   // a box that fades in/out
+   var fadeBox     = new Box;
+   fadeBox.bgColor     = 'black';
+   fadeBox.fontColor   = 'white';
+   fadeBox.borderStyle = 'none';
+   fadeBox.delayTime   = 200;
+   fadeBox.allowFade   = true;
+   fadeBox.fadeIn      = 750;
+   fadeBox.fadeOut     = 200;
+
+ </script>
+</head> 
+
+<body>
+
+<table cellpadding=3>
+<tr>
+<th align=left rowspan=2>Demonstration:</th>
+<th  class="tt" onmouseover="whiteBalloon.showTooltip(event,'Your message goes here')">plain hover</th>
+<th  class="tt">
+<span onmouseover="whiteBalloon.showTooltip(event,'Your are hovering, I said click me!')"
+      onclick="whiteBalloon.showTooltip(event,'Your sticky message goes here.',1)">click me</span>
+</th>
+<th  class="tt"><span onmouseover="blueBalloon.showTooltip(event,'This is a stemless balloon. Your message goes here!')">
+blue balloon
+</span></th>
+<th rowspan=4>
+<a href="http://www.gmod.org/wiki/index.php/Popup_Balloons" target="_blank"
+   onmouseover="whiteBalloon.showTooltip(event,'Want to do this with your website? Click for documentation!')">
+<img src="/images/sample_balloon.png" style="border:2px solid black" /></a>
+</th>
+</tr>
+<tr>
+<th  class="tt"><span onmouseover="box.showTooltip(event,'Your message goes here!')">popup  box</span></th>
+<th  class="tt"><span onmouseover="fadeBox.showTooltip(event,'Your message goes here!')">fading box</span></th>
+<th	 class="tt"><span onmouseover="box.showTooltip(event,'Your sticky message goes here!',1,275)">sticky box</span></th>
+</tr>
+<tr>
+<th align=left>Documentation:</th>
+<th colspan=3 align=left class=tt>
+<a class=tt href="http://gmod.org/wiki/Popup_Balloons"
+   onmouseover="whiteBalloon.showTooltip(event,'Click this link to go to documentation on the GMOD Wiki')">
+http://gmod.org/wiki/Popup_Balloons
+</th>
+</tr>
+<tr>
+<th align=left>Download:</th>
+<th colspan=3 align=left class=tt>
+<a class=tt href="http://gmod.cvs.sourceforge.net/*checkout*/gmod/balloon-tooltips/download/balloons.tar.gz"
+   onmouseover="box.showTooltip(event,'click to download the whole package, with all required scripts, images, etc',0,300)">
+balloons.tar.gz
+</th>
+</tr>
+</table>
+
+
+
+ + + + +

+This is an example of a simple balloon message + +

+ <a href="javascript:void(0)" onmouseover="whiteBalloon.showTooltip(event,'I am a simple message...')">message</a>
+
+ +This is an example of the same message with a different balloon style + +
+ onmouseover="blueBalloon.showTooltip(event,'I am a simple message...')">message</a>
+
+ +This is an example of the same message with a box style + +
+ onmouseover="box.showTooltip(event,'I am a simple message...')">message</a>
+
+ +

+ +

+Roll over +this text for an example of HTML-formatted text loaded from a hidden <div> element. +

+ onmouseover="whiteBalloon.showTooltip(event,'load:lorem1')"
+ ...
+ <div id="lorem1" style="display:none">
+   Lorem ipsum dolor sit amet, <b><i>consectetuer adipiscing elit</b></i>. Vestibulum iaculis,
+   ligula quis fringilla volutpat, metus mi molestie lorem, <span style="color:red">quis accumsan pede
+    turpis nec metus.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
+ </div>
+
+
+ + +Adding a third argument makes the tooltip sticky. +
+ onmouseover="whiteBalloon.showTooltip(event,'load:lorem2',1)"
+
+ +A fourth argument will set the width (Example: +300px sticky balloon) +     Try a blue version + +
+ onmouseover="whiteBalloon.showTooltip(event,'load:lorem2',1,300)"
+
+ +Now let's try that with a +sticky box. + +
+ onmouseover="box.showTooltip(event,'load:lorem2',1,300)"
+
+ +

+ +

+Here is an example of a tooltip balloon that is populated by an + +image. +

+ onmouseover="whiteBalloon.showTooltip(event,'<img src=/images/balloons.png>')"
+
+

+ +

+This link will create a sticky balloon whose contents are from a remote URL. + +What's new?
This requires an embedded iframe. +

+ onmouseover="whiteBalloon.showTooltip(event,'\
+ <iframe style=\'width:300;height:300;border:0;padding-right:16px\' \
+ src=\'http://www.nypost.com/avantgo/avantnews/avantnews.htm\'></iframe>',1)"
+
+
+Ajax methods are also available. +

+ + diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/balloon.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/balloon.png new file mode 100755 index 0000000..6f3d80f Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/balloon.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/balloon_ie.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/balloon_ie.png new file mode 100755 index 0000000..b31b08c Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/balloon_ie.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/balloons.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/balloons.png new file mode 100755 index 0000000..9f5a767 Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/balloons.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/close.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/close.png new file mode 100755 index 0000000..90d2ae4 Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/close.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/down_left.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/down_left.png new file mode 100755 index 0000000..3da4f37 Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/down_left.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/down_right.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/down_right.png new file mode 100755 index 0000000..37cce24 Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/down_right.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/up_left.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/up_left.png new file mode 100755 index 0000000..e0a15a7 Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/up_left.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/images/up_right.png b/pacotes/balloon-tooltips/htdocs_depreciado/images/up_right.png new file mode 100755 index 0000000..6afa80b Binary files /dev/null and b/pacotes/balloon-tooltips/htdocs_depreciado/images/up_right.png differ diff --git a/pacotes/balloon-tooltips/htdocs_depreciado/js/balloon.config.js b/pacotes/balloon-tooltips/htdocs_depreciado/js/balloon.config.js new file mode 100755 index 0000000..deea6bc --- /dev/null +++ b/pacotes/balloon-tooltips/htdocs_depreciado/js/balloon.config.js @@ -0,0 +1,209 @@ +/*jslint plusplus:false,white:false,undef: false, rhino: true, onevar: true, evil: true */ + +/* +This file contains the default configuration options. +Default options can be edited in this file or changed after the Balloon object is +initiliazed as follows: + + var balloon = new Balloon; + balloon.fontColor = 'black'; + balloon.fontFamily = 'Arial, sans-serif'; + balloon.fontSize = '12pt'; + +*/ + +// Adds all the instance variables to the balloon object. +// Edit the values as required for your implementation. +BalloonConfig = function(balloon) { + + // ID of element to which balloon should be added + // default = none (document.body is used) + // This option may be required for mediawiki or other + // implementations with complex stylesheets + balloon.parentID = null; + + // properties of fonts contained in basic balloons (default black) + balloon.fontColor = 'black'; + balloon.fontFamily = 'Arial, sans-serif'; + balloon.fontSize = '12pt'; + + // minimum allowed balloon width (px) + balloon.minWidth = 150; + + // maximum allowed balloon width (px) + balloon.maxWidth = 600; + + // Delay before balloon is displayed (msec) + balloon.delayTime = 500; + + // If fade-in/out is allowed + balloon.allowFade = false; + + // time interval for fade-in (msec) + balloon.fadeIn = 300; + + // time interval for fade-out (msec) + balloon.fadeOut = 300; + + // Vertical Distance from cursor location (px) + balloon.vOffset = 0; + + // text-padding within the balloon (px) + balloon.padding = 10; + + // How long to display mousover balloons (msec) + // false = 'always on' + balloon.displayTime = 10000; + + // width of shadow (space aroung whole balloon; px) + // Balloon can be zero if there is no shadow and the + // edges of the balloon are also the edges of the image + balloon.shadow = 20; + + // images of balloon body. If the browser is IE < 7, png alpha + // channels will not work. An optional alternative image can be + // provided. It should have the same dimensions as the default png image + balloon.images = i3GEO.configura.locaplic+'/pacotes/balloon-tooltips/htdocs/images/'; + balloon.balloonImage = 'balloon.png'; // with alpha channels + balloon.ieImage = 'balloon_ie.png'; // indexed color, transparent background + + // whether the balloon should have a stem + balloon.stem = true; + + // The height (px) of the stem and the extent to which the + // stem image should overlaps the balloon image. + balloon.stemHeight = 32; + balloon.stemOverlap = 3; + + // A stem for each of the four orientations + balloon.upLeftStem = 'up_left.png'; + balloon.downLeftStem = 'down_left.png'; + balloon.upRightStem = 'up_right.png'; + balloon.downRightStem = 'down_right.png'; + + // A close button for sticky balloons + // specify the width of your button image + // if you do not use the default image provided + balloon.closeButton = 'close.png'; + balloon.closeButtonWidth = 16; + + + + /* + This section allows support for AJAX, iframes and JavaScript in balloons + If you have concerns about XSS vulnerabilities, set some or all of these + values to false; + */ + + /// URL for default AJAX request handler + balloon.helpUrl = false; + + // Should AJAX be allowed at all? + balloon.allowAJAX = true; + + // Allow iframe elements in balloons? + balloon.allowIframes = true; + + // Allow javascript event handlers in balloons? + balloon.allowEventHandlers = false; + + // Allow