+
+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 @@ + + +
+
+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 box | +fading 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)" ++
+