In - Ẩn/ hiện các bảng khi rê chuột vào liên kết - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Ẩn/ hiện các bảng khi rê chuột vào liên kết
URL: https://www.javascriptbank.com/crossbrowser-basic-show-hide-demo.html

Ẩn/ hiện các bảng khi rê chuột vào liên kết © JavaScriptBank.com Hiệu ứng sẽ làm ẩn/ hiện các bảng nội dung khi ta rê chuột đến các liên kết được chỉ định.

CSS

<style type="text/css">.trigger {  width:60px;  height:30px;  color:#000;  background:#963;  text-align:center;  margin:8px 0;  padding:2px;}.panel {  position:absolute;  overflow:hidden;  visibility:hidden;  width:300px;  height:200px;  margin:0;  padding:20px;  color:#000;  background:#963;  border:1px solid #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">window.onload = function(){    if (window.winOnLoad) window.winOnLoad();}</script><script type="text/javascript">function winOnLoad(){  setup();}function setup(){  var ele, i = 1;  do {    ele = xGetElementById('trigger' + i);    if (ele) {      ele.panelId = 'panel' + i++;      ele.onmouseover = tOnMouseover;      ele.onmouseout = tOnMouseout;    }  } while(ele);}function tOnMouseover(){  var panel = xGetElementById(this.panelId);  if (panel) {    var x = xScrollLeft() + (xClientWidth() - xWidth(panel)) / 2;    var y = xScrollTop() + (xClientHeight() - xHeight(panel)) / 2;    xMoveTo(panel, x, y);    xShow(panel);  }}function tOnMouseout(){  xHide(this.panelId);}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->

HTML

<div class="collapsible"><p>Mouse over the following elements:</p><div id="trigger1" class="trigger">Panel 1</div><div id="trigger2" class="trigger">Panel 2</div><div id="trigger3" class="trigger">Panel 3</div></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->

Files

http://javascriptbank.com/javascript/form/crossbrowser/x_core.js