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

In - Nhiều liên kết - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Liên kết » Nhiều liên kết
URL: https://www.javascriptbank.com/multilinks.html

Nhiều liên kết © JavaScriptBank.comHiệu ứng JavaScript này có chức năng hiển thị một khung tại vị trí cố định trong trang web, mỗi khi bạn nhấp chuột vào một liên kết được chỉ định; bên cạnh đó, khung này được tạo ra bằng cách dùng kĩ thuật Document Object Model (DOM).

Phiên bản đầy đủ: jsB@nk » Liên kết » Nhiều liên kết
URL: https://www.javascriptbank.com/multilinks.html



CSS
<style>DIV.multilink {  padding: 16px;  background: #FFFFFF;  border: 2px solid #2266AA;}LI.multilink {  list-style-position: inside;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script>/*Created by: www.jtricks.com Web Site: www.jtricks.com/javascript/navigation/multilinks.html*/// Moves the div object to be directly beneath an object.function move_box(an, box) {  var cleft = 0;  var ctop = 0;  var obj = an;  while (obj.offsetParent) {    cleft += obj.offsetLeft;    ctop += obj.offsetTop;    obj = obj.offsetParent;  }  box.style.left = cleft + 'px';  ctop += an.offsetHeight + 8;  // Handle Internet Explorer body margins,  // which affect normal document, but not  // absolute-positioned stuff.  if (document.body.currentStyle && document.body.currentStyle['marginTop']) {    ctop += parseInt(document.body.currentStyle['marginTop']);  }  box.style.top = ctop + 'px';}// Shows a box if it wasn't shown yet or is hidden// or hides it if it is currentfunction show_hide_multilink(an, width, height, className, links) {  var href = an.href;  var boxdiv = document.getElementById(href);  if (boxdiv != null) {    if (boxdiv.style.display=='none') {      // Show existing box, move it      // if document changed layout      move_box(an, boxdiv);      boxdiv.style.display='block';    }  else    // Hide currently shown box.    boxdiv.style.display='none';    return false;  }  // Create box object through DOM  boxdiv = document.createElement('div');  // Assign id equalling to the document it will show  boxdiv.setAttribute('id', href);  boxdiv.className = className;  boxdiv.style.position = 'absolute';  boxdiv.style.width = width + 'px';  boxdiv.style.height = height + 'px';  var linksarr = links.split(';');  var liobj;  var anchorobj;  for (var i = 0; i < linksarr.length; i = i + 2) {    liobj = document.createElement('li');    liobj.className = className;    anchorobj = document.createElement('a');    anchorobj.classname=className;    anchorobj.href = linksarr[i];    anchorobj.target = '_top';    anchorobj.appendChild(document.createTextNode(linksarr[i + 1]));    liobj.appendChild(anchorobj);    boxdiv.appendChild(liobj);  }  document.body.appendChild(boxdiv);  move_box(an, boxdiv);  // The script has successfully shown the box,  // prevent hyperlink navigation.  return false;}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<a href="www.javascriptbank.com" onclick="return show_hide_multilink(this,200,90,'multilink', '#;JavaScript Forum;#;The JavaScript Diaries')"><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->