File: /home/posscale/public_html/templates/pos_scales/tip-txt-img.html
<html>
<head>
<title>Image/Text Tooltip</title>
<style type="text/css">
body { font-family: verdana, arial, helvetica, sans-serif;
font-size: 14px; }
h1 { font-size:18px }
h2 { font-size:16px }
a:link { color:#33c }
a:visited { color:#339 }
/* This is where you can customize the appearance of the tooltip */
div#tipDiv {
position:absolute; visibility:hidden; left:0; top:0; z-index:10000;
background-color:#fff; border:1px solid #000;
width:200px; padding:6px;
color:#000; font-size:11px; line-height:1.3;
}
/* These are used in the wrapTipContent function */
div#tipDiv div.img { text-align:center }
div#tipDiv div.txt { text-align:center; margin-top:4px }
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at dyn-web.com
Copyright 2003-5 by Sharon Paine
See Terms of Use at www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
function doTooltip(e, ar) {
if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
var cntnt = wrapTipContent(ar);
var tip = document.getElementById( Tooltip.tipID );
Tooltip.show(e, cntnt);
}
function hideTip() {
if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
Tooltip.hide();
}
function wrapTipContent(ar) {
var cntnt = "";
if ( ar[0] ) cntnt += '<div class="img"><img src="' + ar[0] + '"></div>';
if ( ar[1] ) cntnt += '<div class="txt">' + ar[1] + '</div>';
return cntnt;
}
// tooltip content here
var messages = new Array();
// array elements: image file name, optional text
messages[0] = ['images/balloon.gif', '<div style="text-align:center; font-weight:bolder; font-style:italic">A red balloon</div>'];
messages[1] = ['images/dot-com-btn.gif', 'See "regular" tooltip'];
// an example with no text
messages[2] = ['images/balloon.gif'];
// optional preloader
var imageHandler = {
path:"images/", // path to images
imgs:[], preload:function() { for(var i=0;arguments[i];i++) {
var img=new Image(); img.src=this.path+arguments[i]; this.imgs[this.imgs.length]=img;}}
}
imageHandler.preload("balloon.gif");
</script>
</head>
<body onload="Tooltip.init()">
<h1>Tooltip with Images and Text</h1>
<p>Example links:</p>
<p><a href="your.html" onmouseover="doTooltip(event, messages[0] )" onmouseout="hideTip()">one</a></p>
<p><a href="tooltip.html" onmouseover="doTooltip(event, messages[1] )" onmouseout="hideTip()">two</a></p>
<p><a href="your.html" onmouseover="doTooltip(event, messages[2] )" onmouseout="hideTip()">three</a></p>
<p>Go <a href="http://www.dyn-web.com/dhtml/tooltips/tip-txt-img.html">online</a> for the latest code and information.</p>
<p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html">Terms of Use</a> if you plan to use the code.</p>
</body>
</html>