请各位高手帮忙，您先看一个网页：
请各位高手帮忙，您先看一个网页：http://www.turnstonefurniture.com/storage/index.htm
就是点击右边的小图片，在左边直接显示大图片，下边还有文字，也不用动态网页，它是如何实现的？
能不能帮小弟把代码采摘下来，让小弟也学习学习，或者有更简单的实现方法，只要换图片这段代码，
谢谢！谢谢！
2005-12-05 18:47
2005-12-06 15:09
2005-12-08 20:27
以下是这个网页的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Turnstone Furniture : Storage</title>
<script language="JavaScript" src="../js/rollover.js"></script>
<script language="JavaScript" src="../js/popup.js"></script>
</head>
<link rel="stylesheet" href="../styles.css">
<body class=bg1 topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onLoad="MM_preloadImages('../images/howtobuy_over.gif','../images/askus_over.gif','../images/home_over.gif','../images/overview_over.gif','../images/seating_over.gif','../images/desks_over.gif','../images/systems_over.gif','../images/storage_over.gif','../images/foliofive_over.gif','../images/materials_over.gif')">
<!-- 16 rows -->
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tr>
<td colspan="13"> </td>
<td width="88"><a href="../overview/howtobuy.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('buy','','../images/howtobuy_over.gif',1)"><img src="../images/howtobuy_off.gif" width="88" height="19" alt="how to buy" name="buy" border="0"></a></td>
<td width="8"><img src="../images/shim.gif" width="8" height="19"></td>
<td width="88"><a href="../overview/contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ask','','../images/askus_over.gif',1)"><img src="../images/askus_off.gif" width="88" height="19" alt="ask us" name="ask" border="0"></a></td>
</tr>
<tr>
<td width="8"><img src="../images/shim.gif" width="8" height="34"></td>
<td colspan="15"><a href="../index.htm"><img src="../images/logo.gif" width="117" height="34" alt="Turnstone" border="0" alt="Turnstone"></a></td>
</tr>
<tr>
<td colspan="2"><a href="../index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','../images/home_over.gif',1)"><img src="../images/home_off.gif" width="96" height="18" name="home" border="0"></a></td>
<td colspan="2"><a href="../overview/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('overview','','../images/overview_over.gif',1)"><img src="../images/overview_off.gif" width="96" height="18" name="overview" border="0"></a></td>
<td colspan="2"><a href="../seating/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('seating','','../images/seating_over.gif',1)"><img src="../images/seating_off.gif" width="96" height="18" name="seating" border="0"></a></td>
<td colspan="2"><a href="../desks/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('desks','','../images/desks_over.gif',1)"><img src="../images/desks_off.gif" width="96" height="18" name="desks" border="0"></a></td>
<td colspan="2"><a href="../systems/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('systems','','../images/systems_over.gif',1)"><img src="../images/systems_off.gif" width="96" height="18" name="systems" border="0"></a></td>
<td colspan="2"><a href="../storage/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('storage','','../images/storage_on.gif',1)"><img src="../images/storage_on.gif" width="96" height="18" name="storage" border="0"></a></td>
<td colspan="2"><a href="../groupworks/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('materials','','../images/materials_over.gif',1)"><img src="../images/materials_off.gif" width="96" height="18" name="materials" border="0"></a></td>
<td colspan="2"><a href="../foliofive/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('groupwork','','../images/foliofive_over.gif',1)"><img src="../images/foliofive_off.gif" width="96" height="18" name="groupwork" border="0"></a></td>
</tr>
<tr>
<td width="8"><img src="../images/shim.gif" width="8" height="36"></td>
<td colspan="7"><img src="../images/header_storage.gif" width="280" height="36" alt="storage"></td>
<td> </td>
<td colspan="7" valign="bottom"><img src="../images/click_information.gif" width="224" height="8" alt="click photo for more information"></td>
</tr>
<tr>
<td width="8" rowspan="12"><img src="../images/shim.gif" width="8" height="8"></td>
<td colspan="7" valign="top" rowspan="12">
<script language=JavaScript SRC="../js/layer_376.js"></script>
<script language=javascript>
// BEGIN data
turnstone = new Array();
turnstone.sName = "turnstone";
turnstone.appNavStyle = 0;
turnstone.appLayout = 1;
var i=0;
turnstone[i++] = "<img src=\"../images/storage_hero_m.jpg\" border=0></a>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/mobile_ts2pbbf22m_l.jpg',670,500)\"><img src=\"../images/mobile_ts2pbbf22m_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>mobile pedestal T2PBBF22M</b><br>steel top, box/box/file; Paint: 4798 Sterling. $US 483 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/mobile_ts2pbf22mt_l.jpg',670,500)\"><img src=\"../images/mobile_ts2pbf22mt_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>mobile pedestal TS2PBF22MT</b><br>laminate top 2746 Black, box/file; Paint: 4798 Sterling; Option: large perforation on drawer front. $US 613 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/mobile_ts2pbf22mch_l.jpg',670,500)\"><img src=\"../images/mobile_ts2pbf22mch_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>mobile pedestal TS2PBF22MCH</b><br>seat cushion, handle, Buzz2 5F06 Sky, box/file; Paint: 4798 Sterling; Option: large perforation on drawer front and case. $US 833 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/mobile_ts2pmbblt_l.jpg',670,500)\"><img src=\"../images/mobile_ts2pmbblt_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>mobile file unit TS2PMBBLT</b><br>laminate top 2746 Black, box/box/lateral; Paint: 4798 Sterling; Option: large perforation on drawer front and case. $US 1251 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/ped_ts2pff22u_l.jpg',670,500)\"><img src=\"../images/ped_ts2pff22u_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>turnstone pedestal TS2PFF22U</b><br>file/file; Paint: 4798 Sterling; available in 22\"\ or 28\"\ depths; configurable with file/file or box/box/file drawers. $US 383 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/lateral_ts2f23oul_l.jpg',670,500)\"><img src=\"../images/lateral_ts2f23oul_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>under-worksurface lateral file TS2F23OUL</b><br>Paint: 4798 Sterling. $US 541 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/lateral_2100series_l.jpg',670,500)\"><img src=\"../images/lateral_2100series_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>2100 series lateral file TS210330L</b><br>three drawers; Paint: 4798 Sterling. $US 621 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/storage_0003337_l.jpg',670,500)\"><img src=\"../images/storage_0003337_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>tower too TS2TWR54L</b><br>Tower Too in sterling, handed left 54\"\h. $US 1190 list.</p></td></tr></table>";
2005-12-09 09:15
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/tower_openside_l.jpg',670,500)\"><img src=\"../images/tower_openside_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>tower too w/ bookcase TS2TWRS54L</b><br>Tower Too w/ bookcase, sterling, handed left 54\"\h. $US 1390 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/tower_dome_l.jpg',670,500)\"><img src=\"../images/tower_dome_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>tower too w/ dome TS2TWR54R, TS2DME</b><br>Tower Too in sterling, handed right 54\"\h. $US 1585 list.</p></td></tr></table>";
turnstone[i++] = "<table border=0 cellpadding=0 cellspacing=0 width=376><tr><td colspan=2 valign=top><a href=\"javascript:openScript('../images/tower_domeopen_l.jpg',670,500)\"><img src=\"../images/tower_domeopen_m.jpg\" border=0></a></td></tr><tr><td><img src=\"../images/shim.gif\" width=8 height=3></td><td><img src=\"../images/shim.gif\" width=368 height=3></td></tr><tr><td> </td><td valign=top><p class=caption><b>tower too open side and dome TS2TWRS54L, TS2DME</b><br>Tower Too w/ bookcase and dome, sterling, handed left, 54\"\h. $US 1785 list.</p></td></tr></table>";
turnstone[i++] = "<a href=\"javascript:openScript('../images/tower_hero_l.jpg',670,500)\"><img src=\"../images/tower_hero_m.jpg\" border=0></a>";
turnstone[i++] = "<a href=\"javascript:openScript('../images/storage_l.jpg',670,500)\"><img src=\"../images/storage.jpg\" border=0></a>";
turnstone.SelectList = new Array("","");
// END data
if (window.bRenderApp) {
Poptext1("turnstone");
}
</SCRIPT></td>
<td colspan="8"><img src="../images/shim.gif" width="1" height="8"></td>
</tr>
<tr>
<td width="8" valign="top"><img src="../images/shim.gif" width="8" height="1"></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',5);" href="javascript:Swapcopy('turnstone',5);"><img src="../images/ped_ts2pff22u_s.jpg" width="88" height="64" border="0"></a></td>
<td width="8" valign="top" rowspan="11"><img src="../images/shim.gif" width="8" height="1"></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',6);" href="javascript:Swapcopy('turnstone',6);"><img src="../images/lateral_ts2f23oul_s.jpg" width="88" height="64" border="0"></a></td>
<td width="8" valign="top" rowspan="11"><img src="../images/shim.gif" width="8" height="1"></td>
<td width="88" valign="top"> </td>
<td width="8" valign="top" rowspan="11"><img src="../images/shim.gif" width="8" height="1"></td>
<td width="88" valign="top"> </td>
</tr>
<tr>
<td colspan="2"><img src="../images/shim.gif" width="8" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
</tr>
<tr>
<td width="8" valign="top"><img src="../images/shim.gif" width="8" height="22"></td>
<td width="88" valign="top"><p class=caption align="center">under-<br>
worksurface ped.</p></td>
<td width="88" valign="top"><p class=caption align="center">under-<br>
worksurface</p></td>
<td width="88" valign="top"> </td>
<td width="88" valign="top"><p class=caption align="center"> </p></td>
</tr>
<tr>
<td colspan="2"><img src="../images/shim.gif" width="8" height="4"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="4"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="4"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="4"></td>
</tr>
<tr>
<td width="8" valign="top"><img src="../images/shim.gif" width="8" height="64"></td>
<td width="88" valign="top"><a onClick="Swapcopy('turnstone',1);" href="javascript:Swapcopy('turnstone',1);"><img src="../images/mobile_ts2pbbf22m_s.jpg" width="88" height="64" border="0"></a></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',3);" href="javascript:Swapcopy('turnstone',3);"><img src="../images/mobile_ts2pbf22mch_s.jpg" width="88" height="64" border="0"></a></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',4);" href="javascript:Swapcopy('turnstone',4);"><img src="../images/mobile_ts2pmbblt_s.jpg" width="88" height="64" border="0"></a></td>
<td width="88" valign="top"><img src="../images/shim.gif" width="88" height="64"></td>
</tr>
<tr>
<td colspan="2"><img src="../images/shim.gif" width="8" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
</tr>
<tr>
<td width="8" valign="top"><img src="../images/shim.gif" width="8" height="22"></td>
<td width="88" valign="top"><p class=caption align="center">mobile tall </p></td>
<td width="88" valign="top"><p class=caption align="center">mobile short </p></td>
<td width="88" valign="top"><p class=caption align="center"> smoke/mobile file unit </p></td>
<td width="88" valign="top"><img src="../images/shim.gif" width="88" height="22"></td>
</tr>
<tr>
<td colspan="2"><img src="../images/shim.gif" width="8" height="4"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="4"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="4"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="4"></td>
</tr>
<tr>
<td width="8" valign="top"><img src="../images/shim.gif" width="8" height="64"></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',8);" href="javascript:Swapcopy('turnstone',8);"><img src="../images/storage_0003337_s.jpg" width="88" height="64" border="0"></a></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',9);" href="javascript:Swapcopy('turnstone',9);"><img src="../images/tower_openside_s.jpg" width="88" height="64" border="0"></a></td>
<td width="88" valign="top"><a onclick="Swapcopy('turnstone',10);" href="javascript:Swapcopy('turnstone',10);"><img src="../images/tower_dome_s.jpg" width="88" height="64" border="0"></a></td>
<td width="88" valign="top"> </td>
</tr>
<tr>
<td colspan="2"><img src="../images/shim.gif" width="8" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
<td width="88"><img src="../images/shim.gif" width="88" height="2"></td>
</tr>
<tr>
2005-12-09 09:16
</body>
</html>
这个网页用了脚本语言,其实还有别的办法可以实现同样的功能!就是做同页超连接,呵呵~~一页显示不开了~你看起来可能要麻烦些了!
2005-12-09 09:17
2005-12-11 14:55
2005-12-11 14:58
2005-12-14 09:03
2005-12-25 19:51