'+Name+' Frame Options<\/TITLE>'); writeln('</HEAD>'); writeln('<BODY bgcolor=white onblur="self.close();">'); writeln('<div id="Oak" style="position:absolute; left:10px; top:30px; width:'+frameW+'px; height:'+frameH+'px; z-index:1; visibility: '+OakVis+'"><img src="../frames/'+frameOak+'" width="'+frameW+'" height="'+frameH+'"></div>'); writeln('<div id="Walnut" style="position:absolute; left:10px; top:30px; width:'+frameW+'px; height:'+frameH+'px; z-index:2; visibility: '+WalVis+'"><img src="../frames/'+frameWalnut+'" width="'+frameW+'" height="'+frameH+'"></div>'); writeln('<div id="Gold" style="position:absolute; left:10px; top:30px; width:'+frameW+'px; height:'+frameH+'px; z-index:3; visibility: '+GoldVis+'"><img src="../frames/'+frameGold+'" width="'+frameW+'" height="'+frameH+'"></div>'); writeln('<div id="pic" style="position:absolute; left:55px; top:75px; width:'+imageW+'px; height:'+imageH+'px; z-index:4; visibility: visible"><img src="'+imageSRC+'" width="'+imageW+'" height="'+imageH+'"></div>'); writeln('<div id="frames" style="position:absolute; visibility:visible; left:'+framesLeft+'px; top:'+framesTop+'px; width:125px; height:230px; z-index:5"><img src="../frames/frames.jpg" width="125" height="230" usemap="#Map" border="0"></div>'); writeln('<div id="bye" style="position:absolute; visibility:visible; left:'+((windowW-86)/2)+'px; top:'+(windowH-40)+'px; width:86px; height:14px; z-index:6"><a href="javascript:void(0);" onMouseOver="status=\'Click to close window\';return true;" onMouseOut="status=\'\'" onClick="self.close()"><img src="/images/b_close.gif" width="72" height="7" border="0"></a></div>'); writeln('<div id="detailG"style="position:absolute; visibility:hidden; left:'+((windowW-300)/2)+'px; top:'+((windowH-150)/2)+'px; width:300px; height:150px; z-index:7"><img src="../frames/Gold.jpg" width="300" height="150" usemap="#ReturnG" border="0"></div>'); writeln('<div id="detailW"style="position:absolute; visibility:hidden; left:'+((windowW-300)/2)+'px; top:'+((windowH-150)/2)+'px; width:300px; height:150px; z-index:7"><img src="../frames/Walnut.jpg" width="300" height="150" usemap="#ReturnW" border="0"></div>'); writeln('<div id="detailO"style="position:absolute; visibility:hidden; left:'+((windowW-300)/2)+'px; top:'+((windowH-150)/2)+'px; width:300px; height:150px; z-index:7"><img src="../frames/Oak.jpg" width="300" height="150" usemap="#ReturnO" border="0"></div>'); writeln('<map name="Map"><area shape="poly" coords="2,185,62,124,124,186,103,207,64,167,24,208" href="Javascript:opener.oakDetail();" onMouseOver="opener.showOak();return true"><area shape="poly" coords="2,135,63,73,124,134,105,155,63,112,23,154" href="Javascript:opener.walnutDetail();" onMouseOver="opener.showWalnut();return true"><area shape="poly" coords="2,81,62,18,123,80,102,103,62,64,22,102" href="Javascript:opener.goldDetail();" onMouseOver="opener.showGold();return true"></map> '); writeln('<map name="ReturnG"><area shape="poly" coords="4,147,150,2,296,147,194,149,150,108,110,148" href="Javascript:opener.showGold()" ></map>'); writeln('<map name="ReturnW"><area shape="poly" coords="4,147,150,2,296,147,194,149,150,108,110,148" href="Javascript:opener.showWalnut()" ></map>'); writeln('<map name="ReturnO"><area shape="poly" coords="4,147,150,2,296,147,194,149,150,108,110,148" href="Javascript:opener.showOak()" ></map>'); writeln('</BODY>'); writeln('</html>'); close(); }; } // Show different frames function showGold(){ show('pic'); show('frames'); hide('detailG'); hide('Walnut'); hide('Oak'); show('Gold','Antique Gold with Liner'); }; function showWalnut(){ show('pic'); show('frames'); hide('detailW'); show('Walnut'); hide('Oak'); hide('Gold','Compo Walnut with Liner'); }; function showOak(){ show('pic'); show('frames'); hide('detailO'); hide('Walnut'); show('Oak'); hide('Gold','Light Oak with Liner'); }; function goldDetail(){ hide('Gold'); hide('Walnut'); hide('Oak'); hide('pic'); hide('frames'); show('detailG','Frame details'); }; function walnutDetail(){ hide('Gold'); hide('Walnut'); hide('Oak'); hide('pic'); hide('frames'); show('detailW','Frame details'); }; function oakDetail(){ hide('Gold'); hide('Walnut'); hide('Oak'); hide('pic'); hide('frames'); show('detailO','Frame details'); }; // // show / hide / move absolute div layers // lay = element id ; msg = status message // function hide (lay,msg){ switch(browser){ case "ns4": window.popWin.document.layers[lay].visibility='hide'; break ; case "ie4": window.popWin.document.all[lay].style.visibility='hidden'; break; default : //ns5+ & ie5+ tmp=window.popWin.document.getElementById(lay); tmp.style.visibility='hidden'; }; if (msg){ window.popWin.status=msg; return true; }; }; function show (lay,msg) { switch(browser){ case "ns4": window.popWin.document.layers[lay].visibility='visible'; break ; case "ie4": window.popWin.document.all[lay].style.visibility='visible'; break; default : //ns5+ & ie5+ tmp=window.popWin.document.getElementById(lay); tmp.style.visibility='visible'; }; if (msg){ window.popWin.status=msg; return true; }; };