Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Đổi khung bằng liên kết
URL: https://www.javascriptbank.com/changing-textual-content.html
Khi nhấn vào liên kết thì nội dung của các khung sẽ lần lượt thay đổi theo.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Đổi khung bằng liên kết
URL: https://www.javascriptbank.com/changing-textual-content.html
<script language="JavaScript"><!--// displays when page loadsvar origMsg = '<H4>Changing Layers</H4><P>The content here can be changed with either click or mouseover events.</P>'// displays onmouseout, when link displays info onmouseovervar dfltMsg = "A default message to display when mouse not over link - could be same as original message."function showInfo(txt) {// 'info' class is specified for formatting in style sheet above// where 'td.info' necessary or Netscape will ignore itvar info = '<TABLE WIDTH="280" CELLPADDING="4" BORDER="0"><TR><TD class="info" VALIGN="top">' + txt + '</TD></TR></TABLE>'// checking for objects (layers and all) // instead of formal browser detection if (document.layers) {document.info.document.write(info)document.info.document.close()}if (document.all) { document.all.info.innerHTML = info }}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="showInfo(origMsg)"><p>Click Changes Content</p><!-- status message can be included in mouseover, as in first link below --><ul><li><a href="#" onclick="showInfo('content to display when link is clicked')" onmouseover="window.status='your optional status message here'; return true" onmouseout="window.status=''">Click Link 1</a></li><li><a href="#" onclick="showInfo('your content for this link')">Click Link 2</a></li><li><a href="#" onclick="showInfo('your content for link 3 here')">Click Link 3</a></li></ul><p>MouseOver Changes Content</p><!-- replace hash with your destination file --><ul><li><a href="#" onmouseover="showInfo('<H4>Describe Destination</H4><P>Layer size and position can be adjusted to accomodate the information you wish to convey. </P>')" onmouseout="showInfo(dfltMsg)">Link 1</a></li><li><a href="#" onmouseover="showInfo('your content for link 2')" onmouseout="showInfo(dfltMsg)">Link 2</a></li><li><a href="#" onmouseover="showInfo('your content for link 3')" onmouseout="showInfo(dfltMsg)">Link 3</a></li></ul><div id="info" style="clip: rect(0pt, 280px, 300px, 0pt); position: relative; width: 280px; height: 300px; background-color: rgb(204, 204, 204);"></div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->