-
-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/balloons2.html b/pacotes/balloon-tooltips/htdocs/balloons2.html deleted file mode 100644 index 49133bf..0000000 --- a/pacotes/balloon-tooltips/htdocs/balloons2.html +++ /dev/null @@ -1,313 +0,0 @@ - - -
-
-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)" --
-