Full version: jsB@nk » Link » Tooltip » Layer Positioned at Event Location
URL: https://www.javascriptbank.com/layer-positioned-at-event-location.html
The location of the mouseover event is used to locate the layer's top position. The left position is set in the original style specifications and remains constant.
Full version: jsB@nk » Link » Tooltip » Layer Positioned at Event Location
URL: https://www.javascriptbank.com/layer-positioned-at-event-location.html
<style type="text/css"><!--body, td { font-family: verdana, arial, helvetica, sans-serif;font-size: 14px; }h1 { font-size: 18px;}a:link { color:#33c }a:visited { color:#339 }/* specifications for write layer */#infoDiv { position:absolute; left:8px; top:0; z-index:10 }/* for infoDiv content - set width here to remind ns4 */.info{ width:140px; font-family: Verdana, arial, helvetica, sans-serif; font-size: 11px; color:#000; }--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">//dw_layer.jslayerHandler = { getRefs: function (id) { var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null; if (el) el.css = el.style? el.style: el; return el; }, writeLayer: function (el, cntnt) { if (typeof el.innerHTML!="undefined") { el.innerHTML = cntnt; } else if (document.layers) { el.document.write(cntnt); el.document.close(); } }, shiftTo: function (el,x,y) { var px = (document.layers || window.opera)? 0: "px"; if (x != null) el.css.left = x + px; if (y != null) el.css.top = y + px; }, show: function (el) { el.css.visibility = "visible"; }, hide: function (el) { el.css.visibility = "hidden"; }}var imageHandler = { imgs: [], path: "", 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; } }}// returns amount of vertical scrollfunction getScrollY() {var sy = 0;if (document.documentElement && document.documentElement.scrollTop)sy = document.documentElement.scrollTop;else if (document.body && document.body.scrollTop) sy = document.body.scrollTop; else if (window.pageYOffset)sy = window.pageYOffset;else if (window.scrollY)sy = window.scrollY;return sy;}// returns amount of horizontal scrollfunction getScrollX() {var sx = 0;if (document.documentElement && document.documentElement.scrollLeft)sx = document.documentElement.scrollLeft;else if (document.body && document.body.scrollLeft) sx = document.body.scrollLeft; else if (window.pageXOffset)sx = window.pageXOffset;else if (window.scrollX)sx = window.scrollX;return sx;}</script><script type="text/javascript"><!--//Copyright 2001-3 by Sharon Paine// resize fix for ns4var origWidth, origHeight;if (document.layers) {origWidth = window.innerWidth; origHeight = window.innerHeight;window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }}// avoid error of passing event object in older browsersif (!document.getElementById && !document.all && !document.layers)event = "";// messages for linksvar msg1 = "The message layer will appear at the level of the link moused over.";var msg2 = "A clear gif is holding space in the left column.";var msg3 = "Your message goes here.";var page_loaded; // set true onload (avoid errors onmouseover/out before page loaded)function showPosInfo(id, sHTML, e) { if (!page_loaded) return; var el = layerHandler.getRefs(id); if (!el) return; var cntnt = '<div class="info">' + sHTML + '</div>'; layerHandler.hide(el); // just in case ... // get position of onmouseover event and use it to position layer e = (window.event)? window.event: e;if (e) {var y = (e.pageY)? e.pageY: (e.clientY)? e.clientY + getScrollY(): 0; layerHandler.shiftTo(el, null, y);} layerHandler.writeLayer(el, cntnt); layerHandler.show(el);}function hidePosInfo(id) { if (!page_loaded) return; var el = layerHandler.getRefs(id); if (!el) return; layerHandler.hide(el);}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="page_loaded=true;"><table width="550" cellpadding="8" cellspacing="0" border="0"><tbody><tr><td width="145" bgcolor="#eeeeee" valign="top"></td><td valign="top"><h1>Layer Positioned at Event Location</h1><!-- put your urls in place of javascript:// which is there to prevent jump onclick --><p>Hover over the <a href="javascript://" onmouseover="showPosInfo('infoDiv',msg1,event); window.status=''; return true" onmouseout="hidePosInfo('infoDiv')">links</a> to see information written to the layer in the left column.</p><p>The location of the mouseover event is used to locate the layer's top position. The left position is set in the original style specifications and remains constant.</p><p>This code can be used with <a href="javascript://" onmouseover="showPosInfo('infoDiv', msg2,event); window.status=''; return true" onmouseout="hidePosInfo('infoDiv')">linked text</a> or images.</p><p>Your <a href="javascript://" onmouseover="showPosInfo('infoDiv',msg3,event); window.status=''; return true" onmouseout="hidePosInfo('infoDiv')">links</a> could be anywhere and their information will appear in the left column at a position level with that link.</p><p>Click or right click to download the <a href="dw_layer.js" onmouseover="showPosInfo('infoDiv','A small JavaScript file containing common functions.',event); window.status=''; return true" onmouseout="hidePosInfo('infoDiv')">dw_layer.js</a>file used by most of the writing to layers examples. You can save or view this document's source code using your browser menu commands.</p></td></tr></tbody></table><!-- put at end of document --><div id="infoDiv" style="top: 185px; visibility: hidden;"><div class="info">A clear gif is holding space in the left column.</div></div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->