Forums
This topic is locked
Centering hidden "pop up" layers with tables
Posted 06 Mar 2007 07:28:50
1
has voted
06 Mar 2007 07:28:50 Shira Mandel posted:
Hi guys,I am a designer that just got into using Dreamweaver. I am building my portfolio link and so I set up the page using tables and I attatched a behavior to each picture icon of my work to reveal a larger image in a certain section(using layers). I can center the page but the "pop-up" images are not staying in their assigned position as I increase or decrease the browser window.
I have been through several sites trying to find a solution, but the coding they give is too advanced for me to understand.
Can anyone help me out? Do you need a copy of the code?
Replies
Replied 06 Mar 2007 16:53:36
06 Mar 2007 16:53:36 Javier Castro replied:
a link or the the code always helps.
Replied 07 Mar 2007 00:23:52
07 Mar 2007 00:23:52 Shira Mandel replied:
ok, so I just copy/pasted...I hope this makes sense :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>print </title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#BD {
position:absolute;
left:233px;
top:41px;
width:382px;
height:309;
z-index:1;
visibility: hidden;
}
#SL {
position:absolute;
left:640px;
top:29px;
width:294px;
height:268px;
z-index:2;
}
#Layer1 {
position:absolute;
left:635px;
top:28px;
width:220px;
height:305px;
z-index:2;
}
#Layer2 {
position:absolute;
left:635px;
top:38px;
width:138px;
height:258px;
visibility: visible;
}
#Layer3 {
position:absolute;
left:644px;
top:144px;
width:0px;
height:157px;
z-index:2;
}
#SL {
position:absolute;
left:415px;
top:9px;
width:228px;
height:355px;
z-index:2;
visibility: hidden;
}
#ph {
position:absolute;
left:411px;
top:7px;
width:236px;
height:290px;
z-index:3;
visibility: hidden;
}
#tryp {
position:absolute;
left:183px;
top:170px;
width:530px;
height:208px;
z-index:4;
visibility: hidden;
}
#mtv {
position:absolute;
left:423px;
top:10px;
width:217px;
height:354px;
z-index:5;
visibility: hidden;
}
#ice {
position:absolute;
left:418px;
top:10px;
width:225px;
height:348px;
z-index:6;
visibility: hidden;
}
#ten8 {
position:absolute;
left:377px;
top:7px;
width:248px;
height:264px;
z-index:7;
visibility: hidden;
}
#Layer4 {
position:absolute;
left:503px;
top:66px;
width:303px;
height:241px;
z-index:8;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"
)>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'<img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="BD"><img src="print page/pop ups/BD.jpg" width="411" height="296" border="0" /></div>
<div id="SL"><img src="print page/pop ups/SL.jpg" width="224" height="350" /></div>
<div id="ph"><img src="print page/pop ups/ph.jpg" width="232" height="354" /></div>
<div id="tryp"><img src="print page/pop ups/tryp.jpg" width="531" height="206" /></div>
<div id="mtv"><img src="print page/pop ups/mtv1.jpg" width="222" height="355" /></div>
<div id="ice"><img src="print page/pop ups/icebound.jpg" width="225" height="359" /></div>
<div id="ten8"><img src="print page/pop ups/10.8.jpg" width="263" height="361" /></div>
<div id="Layer4">
<table width="300" height="239" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="print page/pop ups/BD.jpg" width="411" height="296" /></td>
</tr>
</table>
</div>
<table width="800" height="619" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="811" scope="col"><img src="print page/1.gif" width="800" height="349" />
<table width="800" height="52" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<th height="54" scope="col"><img src="print page/2.jpg" width="222" height="52" /></th>
<th scope="col"><img src="print page/3.gif" width="579" height="52" /></th>
</tr>
</table></th>
</tr>
</table>
<table width="800" height="52" border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<th width="222" height="52" scope="col"><img src="print page/4.jpg" width="222" height="52" align="left" /></th>
<th width="52" scope="col"><img src="print page/5.jpg" width="52" height="52" onmouseover="MM_showHideLayers('ten8','','show')" onmouseout="MM_showHideLayers('ten8','','hide')" /></th>
<th width="20" scope="col"><img src="print page/6.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/7.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show')" onmouseout="MM_showHideLayers('SL','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/8.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/9.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('mtv','','show')" onmouseout="MM_showHideLayers('mtv','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/10.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/11.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('tryp','','show')" onmouseout="MM_showHideLayers('tryp','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/12.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/13.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('ph','','show')" onmouseout="MM_showHideLayers('ph','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/14.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/15.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('BD','','show')" onmouseout="MM_showHideLayers('BD','','hide','Layer4','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/16.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/17.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show','ice','','show')" onmouseout="MM_showHideLayers('SL','','hide','ice','','hide')" /></a></th>
<th width="108" scope="col"><img src="print page/18.gif" width="108" height="52" /></th>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="222" height="119" scope="col"><img src="print page/19.jpg" width="222" height="149" align="left" /></th>
<th width="10" scope="col"><img src="print page/20.gif" width="319" height="149" /></th>
<th width="568" scope="col"><img src="print page/21.gif" width="260" height="44" align="top" />
<table width="41" height="21" border="0">
<tr>
<th height="17" scope="col"><img src="print page/22.gif" width="32" height="15" /></th>
<th scope="col"><img src="print page/23.gif" width="25" height="15" /></th>
<th scope="col"><img src="print page/24.gif" width="27" height="15" /></th>
<th scope="col"><img src="print page/25.gif" width="29" height="15" /></th>
<th scope="col"><img src="print page/26.gif" width="23" height="15" /></th>
<th width="41" scope="col"><img src="print page/27.gif" width="126" height="15" /></th>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>print </title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#BD {
position:absolute;
left:233px;
top:41px;
width:382px;
height:309;
z-index:1;
visibility: hidden;
}
#SL {
position:absolute;
left:640px;
top:29px;
width:294px;
height:268px;
z-index:2;
}
#Layer1 {
position:absolute;
left:635px;
top:28px;
width:220px;
height:305px;
z-index:2;
}
#Layer2 {
position:absolute;
left:635px;
top:38px;
width:138px;
height:258px;
visibility: visible;
}
#Layer3 {
position:absolute;
left:644px;
top:144px;
width:0px;
height:157px;
z-index:2;
}
#SL {
position:absolute;
left:415px;
top:9px;
width:228px;
height:355px;
z-index:2;
visibility: hidden;
}
#ph {
position:absolute;
left:411px;
top:7px;
width:236px;
height:290px;
z-index:3;
visibility: hidden;
}
#tryp {
position:absolute;
left:183px;
top:170px;
width:530px;
height:208px;
z-index:4;
visibility: hidden;
}
#mtv {
position:absolute;
left:423px;
top:10px;
width:217px;
height:354px;
z-index:5;
visibility: hidden;
}
#ice {
position:absolute;
left:418px;
top:10px;
width:225px;
height:348px;
z-index:6;
visibility: hidden;
}
#ten8 {
position:absolute;
left:377px;
top:7px;
width:248px;
height:264px;
z-index:7;
visibility: hidden;
}
#Layer4 {
position:absolute;
left:503px;
top:66px;
width:303px;
height:241px;
z-index:8;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"
)>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'<img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="BD"><img src="print page/pop ups/BD.jpg" width="411" height="296" border="0" /></div>
<div id="SL"><img src="print page/pop ups/SL.jpg" width="224" height="350" /></div>
<div id="ph"><img src="print page/pop ups/ph.jpg" width="232" height="354" /></div>
<div id="tryp"><img src="print page/pop ups/tryp.jpg" width="531" height="206" /></div>
<div id="mtv"><img src="print page/pop ups/mtv1.jpg" width="222" height="355" /></div>
<div id="ice"><img src="print page/pop ups/icebound.jpg" width="225" height="359" /></div>
<div id="ten8"><img src="print page/pop ups/10.8.jpg" width="263" height="361" /></div>
<div id="Layer4">
<table width="300" height="239" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="print page/pop ups/BD.jpg" width="411" height="296" /></td>
</tr>
</table>
</div>
<table width="800" height="619" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="811" scope="col"><img src="print page/1.gif" width="800" height="349" />
<table width="800" height="52" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<th height="54" scope="col"><img src="print page/2.jpg" width="222" height="52" /></th>
<th scope="col"><img src="print page/3.gif" width="579" height="52" /></th>
</tr>
</table></th>
</tr>
</table>
<table width="800" height="52" border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<th width="222" height="52" scope="col"><img src="print page/4.jpg" width="222" height="52" align="left" /></th>
<th width="52" scope="col"><img src="print page/5.jpg" width="52" height="52" onmouseover="MM_showHideLayers('ten8','','show')" onmouseout="MM_showHideLayers('ten8','','hide')" /></th>
<th width="20" scope="col"><img src="print page/6.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/7.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show')" onmouseout="MM_showHideLayers('SL','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/8.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/9.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('mtv','','show')" onmouseout="MM_showHideLayers('mtv','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/10.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/11.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('tryp','','show')" onmouseout="MM_showHideLayers('tryp','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/12.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/13.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('ph','','show')" onmouseout="MM_showHideLayers('ph','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/14.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/15.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('BD','','show')" onmouseout="MM_showHideLayers('BD','','hide','Layer4','','hide')" /></a></th>
<th width="20" scope="col"><img src="print page/16.gif" width="20" height="52" /></th>
<th width="52" scope="col"><a href="#"><img src="print page/17.jpg" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show','ice','','show')" onmouseout="MM_showHideLayers('SL','','hide','ice','','hide')" /></a></th>
<th width="108" scope="col"><img src="print page/18.gif" width="108" height="52" /></th>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="222" height="119" scope="col"><img src="print page/19.jpg" width="222" height="149" align="left" /></th>
<th width="10" scope="col"><img src="print page/20.gif" width="319" height="149" /></th>
<th width="568" scope="col"><img src="print page/21.gif" width="260" height="44" align="top" />
<table width="41" height="21" border="0">
<tr>
<th height="17" scope="col"><img src="print page/22.gif" width="32" height="15" /></th>
<th scope="col"><img src="print page/23.gif" width="25" height="15" /></th>
<th scope="col"><img src="print page/24.gif" width="27" height="15" /></th>
<th scope="col"><img src="print page/25.gif" width="29" height="15" /></th>
<th scope="col"><img src="print page/26.gif" width="23" height="15" /></th>
<th width="41" scope="col"><img src="print page/27.gif" width="126" height="15" /></th>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Replied 07 Mar 2007 03:30:34
07 Mar 2007 03:30:34 Javier Castro replied:
I see that your left margin is 233, 640, 635, 644, etc. Is there a reason as to why is that? right now your referenece for that margin is the left side of the BODY of the document and will vary from monitor to monitor, and setting. I would suggest to create a DIV that would wrap your TABLE. Once you do that, center your DIV and start aligning your layers in relation to that new DIV. Since your New DIV will have a dimesion, you, will know the exact number that you need to have it properly aligned.
Hope it helps. If not, show your link to have a visual of your page.
Hope it helps. If not, show your link to have a visual of your page.
Replied 07 Mar 2007 09:04:50
07 Mar 2007 09:04:50 Shira Mandel replied:
I really appreciate your advice, I am so new at Dreamweaver or programming (a week or so) that I cant follow the instructions too well.
The page itself (done in tables) centers no matter how wide I expand the browser, however, the layers I have assigned behavios do not always align at the place I need them to at the design of the page.
What I did on this page is make tables for the overall design and then put everything into one 800 x 600 table, which I centered. The "layers" do not line up though.
Can I send you the link to the temporary browser window that shows on dreamweavers "preview in browser"....im so lost.
ThankS!
The page itself (done in tables) centers no matter how wide I expand the browser, however, the layers I have assigned behavios do not always align at the place I need them to at the design of the page.
What I did on this page is make tables for the overall design and then put everything into one 800 x 600 table, which I centered. The "layers" do not line up though.
Can I send you the link to the temporary browser window that shows on dreamweavers "preview in browser"....im so lost.
ThankS!
Replied 07 Mar 2007 18:25:06
07 Mar 2007 18:25:06 Javier Castro replied:
Post the link and lets go from there
Replied 08 Mar 2007 07:25:57
08 Mar 2007 07:25:57 Shira Mandel replied:
sorry it took so long, it took a while to learn how to upload a page....
smandeldesign.com/test.html
thanks a lot <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
smandeldesign.com/test.html
thanks a lot <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
Replied 08 Mar 2007 07:27:23
08 Mar 2007 07:27:23 Shira Mandel replied:
If you widen or narrow the browser window, you can see that the images that come up from being rolled over do not stay in the same place.
Replied 08 Mar 2007 17:52:53
08 Mar 2007 17:52:53 Javier Castro replied:
Here is a quick fix not the best, but it will keep you going. I would suggest you read about the use of divs and layers, because there are better ways to do what you are trying.
paste the following code to a new page, save it with another name and upload it and see if that is what you want:
<img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>print </title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#BD {
position:absolute;
left:233px;
top:41px;
width:382px;
height:309;
z-index:1;
visibility: hidden;
}
#SL {
position:absolute;
left:640px;
top:29px;
width:294px;
height:268px;
z-index:2;
}
#Layer1 {
position:absolute;
left:635px;
top:28px;
width:220px;
height:305px;
z-index:2;
}
#Layer2 {
position:absolute;
left:635px;
top:38px;
width:138px;
height:258px;
visibility: visible;
}
#Layer3 {
position:absolute;
left:644px;
top:144px;
width:0px;
height:157px;
z-index:2;
}
#SL {
position:absolute;
left:415px;
top:9px;
width:228px;
height:355px;
z-index:2;
visibility: hidden;
}
#ph {
position:absolute;
left:411px;
top:7px;
width:236px;
height:290px;
z-index:3;
visibility: hidden;
}
#tryp {
position:absolute;
left:183px;
top:170px;
width:530px;
height:208px;
z-index:4;
visibility: hidden;
}
#mtv {
position:absolute;
left:423px;
top:10px;
width:217px;
height:354px;
z-index:5;
visibility: hidden;
}
#ice {
position:absolute;
left:418px;
top:10px;
width:225px;
height:348px;
z-index:6;
visibility: hidden;
}
#ten8 {
position:absolute;
left:377px;
top:7px;
width:248px;
height:264px;
z-index:7;
visibility: hidden;
}
#Layer4 {
position:absolute;
left:503px;
top:66px;
width:303px;
height:241px;
z-index:8;
visibility: hidden;
}
#divWrap {
padding: 0px;
width: 800px;
margin-right: auto;
margin-left: auto;
position:relative;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?")>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'<img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="divWrap">
<!-- -->
<div id="divScreen">
<!-- layers -->
<!-- -->
<div id="BD"><img src="smandeldesign.com/print page/pop ups/BD.jpg" width="411" height="296" border="0" /></div>
<div id="SL"><img src="smandeldesign.com/print page/pop ups/SL.jpg" width="224" height="350" /></div>
<div id="ph"><img src="smandeldesign.com/print page/pop ups/ph.jpg" width="232" height="354" /></div>
<div id="tryp"><img src="smandeldesign.com/print page/pop ups/tryp.jpg" width="531" height="206" /></div>
<div id="mtv"><img src="smandeldesign.com/print page/pop ups/mtv1.jpg" width="222" height="355" /></div>
<div id="ice"><img src="smandeldesign.com/print page/pop ups/icebound.jpg" width="225" height="359" /></div>
<div id="ten8"><img src="smandeldesign.com/print page/pop ups/10.8.jpg" width="263" height="361" /></div>
<!--end of layers -->
<img src="smandeldesign.com/print page/1.gif" alt="value" width="800" height="349" /> </div>
<!-- -->
<div id="divBelowScreen"> <img src="smandeldesign.com/print page/2.jpg" alt="value" width="222" height="52" /><img src="smandeldesign.com/print page/3.gif" alt="value" width="579" height="52" /> </div>
<!-- -->
<div id="div3"> <img src="smandeldesign.com/print page/4.jpg" alt="value" width="222" height="52" align="left" /><a href="#"><img src="smandeldesign.com/print page/5.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('ten8','','show')" onmouseout="MM_showHideLayers('ten8','','hide')" /></a> <img src="smandeldesign.com/print page/6.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/7.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show')" onmouseout="MM_showHideLayers('SL','','hide')" /></a> <img src="smandeldesign.com/print page/8.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/9.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('mtv','','show')" onmouseout="MM_showHideLayers('mtv','','hide')" /></a> <img src="smandeldesign.com/print page/10.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/11.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('tryp','','show')" onmouseout="MM_showHideLayers('tryp','','hide')" /></a> <img src="smandeldesign.com/print page/12.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/13.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('ph','','show')" onmouseout="MM_showHideLayers('ph','','hide')" /></a
><img src="smandeldesign.com/print page/14.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/15.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('BD','','show')" onmouseout="MM_showHideLayers('BD','','hide')" /></a> <img src="smandeldesign.com/print page/16.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/17.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show','ice','','show')" onmouseout="MM_showHideLayers('SL','','hide','ice','','hide')" /></a> <img src="smandeldesign.com/print page/18.gif" alt="value" width="108" height="52" /> </div>
<!-- -->
</div>
<!-- -->
</body>
</html>
paste the following code to a new page, save it with another name and upload it and see if that is what you want:
<img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>print </title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#BD {
position:absolute;
left:233px;
top:41px;
width:382px;
height:309;
z-index:1;
visibility: hidden;
}
#SL {
position:absolute;
left:640px;
top:29px;
width:294px;
height:268px;
z-index:2;
}
#Layer1 {
position:absolute;
left:635px;
top:28px;
width:220px;
height:305px;
z-index:2;
}
#Layer2 {
position:absolute;
left:635px;
top:38px;
width:138px;
height:258px;
visibility: visible;
}
#Layer3 {
position:absolute;
left:644px;
top:144px;
width:0px;
height:157px;
z-index:2;
}
#SL {
position:absolute;
left:415px;
top:9px;
width:228px;
height:355px;
z-index:2;
visibility: hidden;
}
#ph {
position:absolute;
left:411px;
top:7px;
width:236px;
height:290px;
z-index:3;
visibility: hidden;
}
#tryp {
position:absolute;
left:183px;
top:170px;
width:530px;
height:208px;
z-index:4;
visibility: hidden;
}
#mtv {
position:absolute;
left:423px;
top:10px;
width:217px;
height:354px;
z-index:5;
visibility: hidden;
}
#ice {
position:absolute;
left:418px;
top:10px;
width:225px;
height:348px;
z-index:6;
visibility: hidden;
}
#ten8 {
position:absolute;
left:377px;
top:7px;
width:248px;
height:264px;
z-index:7;
visibility: hidden;
}
#Layer4 {
position:absolute;
left:503px;
top:66px;
width:303px;
height:241px;
z-index:8;
visibility: hidden;
}
#divWrap {
padding: 0px;
width: 800px;
margin-right: auto;
margin-left: auto;
position:relative;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"
)>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'<img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="divWrap">
<!-- -->
<div id="divScreen">
<!-- layers -->
<!-- -->
<div id="BD"><img src="smandeldesign.com/print page/pop ups/BD.jpg" width="411" height="296" border="0" /></div>
<div id="SL"><img src="smandeldesign.com/print page/pop ups/SL.jpg" width="224" height="350" /></div>
<div id="ph"><img src="smandeldesign.com/print page/pop ups/ph.jpg" width="232" height="354" /></div>
<div id="tryp"><img src="smandeldesign.com/print page/pop ups/tryp.jpg" width="531" height="206" /></div>
<div id="mtv"><img src="smandeldesign.com/print page/pop ups/mtv1.jpg" width="222" height="355" /></div>
<div id="ice"><img src="smandeldesign.com/print page/pop ups/icebound.jpg" width="225" height="359" /></div>
<div id="ten8"><img src="smandeldesign.com/print page/pop ups/10.8.jpg" width="263" height="361" /></div>
<!--end of layers -->
<img src="smandeldesign.com/print page/1.gif" alt="value" width="800" height="349" /> </div>
<!-- -->
<div id="divBelowScreen"> <img src="smandeldesign.com/print page/2.jpg" alt="value" width="222" height="52" /><img src="smandeldesign.com/print page/3.gif" alt="value" width="579" height="52" /> </div>
<!-- -->
<div id="div3"> <img src="smandeldesign.com/print page/4.jpg" alt="value" width="222" height="52" align="left" /><a href="#"><img src="smandeldesign.com/print page/5.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('ten8','','show')" onmouseout="MM_showHideLayers('ten8','','hide')" /></a> <img src="smandeldesign.com/print page/6.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/7.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show')" onmouseout="MM_showHideLayers('SL','','hide')" /></a> <img src="smandeldesign.com/print page/8.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/9.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('mtv','','show')" onmouseout="MM_showHideLayers('mtv','','hide')" /></a> <img src="smandeldesign.com/print page/10.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/11.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('tryp','','show')" onmouseout="MM_showHideLayers('tryp','','hide')" /></a> <img src="smandeldesign.com/print page/12.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/13.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('ph','','show')" onmouseout="MM_showHideLayers('ph','','hide')" /></a
><img src="smandeldesign.com/print page/14.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/15.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('BD','','show')" onmouseout="MM_showHideLayers('BD','','hide')" /></a> <img src="smandeldesign.com/print page/16.gif" alt="value" width="20" height="52" /> <a href="#"><img src="smandeldesign.com/print page/17.jpg" alt="value" width="52" height="52" border="0" onmouseover="MM_showHideLayers('SL','','show','ice','','show')" onmouseout="MM_showHideLayers('SL','','hide','ice','','hide')" /></a> <img src="smandeldesign.com/print page/18.gif" alt="value" width="108" height="52" /> </div>
<!-- -->
</div>
<!-- -->
</body>
</html>
Replied 08 Mar 2007 21:16:55
08 Mar 2007 21:16:55 Shira Mandel replied:
thanks so much!