Version complète: jsB@nk » Lien » Tooltip » Position couche avec Scroll
URL: https://www.javascriptbank.com/position-layer-with-scroll.html
Un parent placé div est placé dans la colonne de droite. Lorsque l'utilisateur se situe sur un lien, le montant de scroll est déterminée. Ce montant est utilisé dans le calcul de la position verticale de la couche d'écrire de sorte qu'il apparaît toujours au même emplacement dans la fenêtre.
Version complète: jsB@nk » Lien » Tooltip » Position couche avec Scroll
URL: https://www.javascriptbank.com/position-layer-with-scroll.html
<style type="text/css"><!--body, td { font-family: verdana, arial, helvetica, sans-serif;font-size: 12px; }th { font-family: verdana, arial, helvetica, sans-serif;font-size: 16px; text-align:left}a:link { color:#33c }a:visited { color:#339 }/* specifications for write layer */#infoDiv { position:relative; z-index:10 }/* for infoDiv content - set width here to remind ns4 (this code will only work for ns4 if layer written to is positioned absolute) */.info{ width:140px; font-family: Verdana, arial, helvetica, sans-serif; font-size: 11px; color:#fff; }--></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); }}// layer content variablesvar msg1 = "Your links could be anywhere and don\'t need to be images.";var msg2 = "Read code comments for more information about implementing the code.";var msg3 = "When support for Netscape 4 is less of a priority, much leaner code will suffice.";var msg4 = "Put your message here.";var msg5 = "Your message here.";var page_loaded; // set true onload (avoid errors onmouseover/out before page loaded)function showInfo(id, sHTML) {if (!page_loaded) return; var el = layerHandler.getRefs(id); if (!el) return; layerHandler.hide(el); // just in case ...var cntnt = '<div class="info">' + sHTML + '</div>';var y = getScrollY(); layerHandler.shiftTo(el, null, y); layerHandler.writeLayer(el, cntnt); layerHandler.show(el);}function hideInfo(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="578" align="center" cellpadding="8" border="0" cellspacing="0"><tbody><tr><td width="100"><a href="javascript://" onmouseover="showInfo('infoDiv',msg1)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td><td valign="top" width="280" rowspan="4"><p>Hover over the images to the left and the links below and information will be written to the layer in the right column.</p><p>A relative-positioned div is placed in the right column. When the user hovers over a link, the amount of scroll is determined. That amount is used in calculating the vertical position of the write-layer so that it always appears at the same relative location in the window.</p><p>Scroll and hover over the images and links to see for yourself. Notice this is a centered table. </p><p>The code includes support for Netscape 4, but since the layer is positioned relative in this example, Netscape 4 fails silently.</p><p>Click or right click to download the <a href="dw_layer.js" onmouseover="showInfo('infoDiv','A small JavaScript file containing common functions.'); window.status=''; return true" onmouseout="hideInfo('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><td width="150" valign="top" bgcolor="#333366" rowspan="5"><!-- here is the layer --><div id="infoDiv" style="top: 215px; visibility: hidden;"><div class="info">Put your message here.</div></div></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg2)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg3)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg4)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg5)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td><td valign="bottom"> <p dir="ltr"> </td></tr><tr> <td></td> <td></td> <td><img src="pos-scroll2_files/clear.gif" width="150" height="1" alt="" border="0"></td></tr></tbody></table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->