»
Tiếng AnhTiếng PhápTiếng Việt

In - Chú thích cho liên kết trong layer 1 - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích » Chú thích cho liên kết trong layer 1
URL: https://www.javascriptbank.com/layer-positioned-at-event-location.html

Chú thích cho liên kết trong layer 1 © JavaScriptBank.comHiệu ứng tạo chú thích cho các liên kết trong một layer ở những vị trí đã xác định trước.

Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích » Chú thích cho liên kết trong layer 1
URL: https://www.javascriptbank.com/layer-positioned-at-event-location.html



CSS
<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-->


JavaScript
<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-->


HTML
<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&#39;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&#39;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-->